add autocomplete to dynamically created inputs

I hope you can help me ... I have several days trying to solve this small problem, I happen to have a table with an initial row and a button that adds more rows (dynamic rows) ... The question is that the inputs have the autocomplete function, of which the values for the autocomplete command to bring from my DB and it happens that the autocomplete only works for the first row of the table and for the rows that are dynamically created does not work, I leave the code to see if you can help me. Thank you in advance ...

<table width=100% cellpadding="0" cellspacing="0" id="tabla_materiales">

      <tr height="35">
      <td class="w3-panel w3-border w3-border-black">
      <center><label>Material o Refacción</label></center>
      </td>

      <td class="w3-panel w3-border-top w3-border-bottom w3-border-right  w3-border-black">
      <center><label>Cantidad</label></center>
      </td>

    <td class="w3-panel w3-border-top w3-border-bottom w3-border-right  w3-border-black">
      <center><label>Costo Unitario</label></center>
      </td>

          </tr>

          <tr height="30">
      <td width="488px" class="w3-panel w3-border-bottom w3-border-right w3-border-left w3-border-black"><center>
      <input type="text" name="txt_material_refaccion" id="txt_material_refaccion" class="txt_material_refaccion" value="" style="width:100%; text-align:center; autofocus" required></center>
      </td>

      <td class="w3-panel w3-border-bottom w3-border-right  w3-border-black"><center>
      <input type="text" name="txt_cantidad" id="txt_cantidad" class="txt_cantidad" value="" style="width:100px; text-align:center; autofocus" required onkeypress="return valida(event)"></center>
      </td>

    <td class="w3-panel w3-border-bottom w3-border-right  w3-border-black"><center>
      <input type="text" name="txt_costo_u" id="txt_costo_u" class="txt_costo_u" value="" style="width:100px; text-align:center; autofocus" required onkeypress="return valida(event)"></center>
      </td>

          </tr>
          </table>


<center><input type="button" class="btn" name="btn_agrega_fila2" id="btn_agrega_fila2" value="Agregar Fila" style="width: 110px; height: 28px"></center>

<script>
$(document).ready(function(){
    $('#btn_agrega_fila2').click(function(){
        agregar2();
    });

});

var count2 = 2;
function agregar2(){
val2 = count2;
var fila2='<tr height="30"><td width="350px" class="w3-panel w3-border-bottom w3-border-right w3-border-left w3-border-black"><center><input type="text" name="txt_material_refaccion'+ count2++ +'" id="txt_material_refaccion'+val2+'" class="txt_material_refaccion" value="" required></center></td><td class="w3-panel w3-border-bottom w3-border-right  w3-border-black"><center><input type="text" name="txt_cantidad'+val2+'" id="txt_cantidad'+val2+'" class="txt_cantidad" value="" required onkeypress="return valida(event)"></center></td><td class="w3-panel w3-border-bottom w3-border-right  w3-border-black"><center><input type="text" name="txt_costo_u'+val2+'" id="txt_costo_u'+val2+'" class="txt_costo_u" value=""  autofocus" required onkeypress="return valida(event)"></center></td></tr>';
    $('#tabla_materiales').append(fila2);
    reordenar();
}
</script>


<script>
var tags=<?php echo json_encode($array);?>;
$( "#txt_material_refaccion" ).autocomplete({source: function ( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );response( $.grep( tags, function ( item ){
return matcher.test( item );}) );}});
</script>