My input element is not updating or display value manually

I have data coming from the backend contains a table with the element input and when data came I append this table to the body of my table.

So my problem input element is not updated a value even if I press inspect and set the value manually also is not display the value. I don't know what is going on.

This my code coming from backend (PHP):

public function get_target_type_record(Request $request){
  //...
  foreach ($routes as $list) {
    $table .= "<tr class='collapse order" . $i . " business_type_id_" . $item->id . "'>";
    $table .= "<td><i class=\"fa fa-minus-square\"></i> </td>";
    $table .= "<td>--</td>";
    $table .= " <td>" . $list->id . "</td>";
    $table .= "<td>" . $list->route_name . "</td>";
    $table .= "<td>
    <input type='text' class='form-control dynamic-input'
    value='0'>
    </td>";
    $table .= "<td></td></tr>";
  }

  return response()->json($table);
}

blade file (html):

<table class="table table-hover users-table">
  <thead>
    <tr>
      <th>#</th>
      <th>ID</th>
      <th>Name</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody id="target-table">
  </tbody>
</table>

and this my jQuery code:

$('#select2-target_type_group_menu2').on('change', function(event) {
  var menu2_id = this.value;
  var menu1_id = document.getElementById('menu1_id').value;
  event.preventDefault();
  $.ajax({
    url: "",
    type: "GET",
    dataType: 'json',
    data:{
      item_type : [
        menu1_id,
        menu2_id
      ],
    },
    success: function (data) {
      document.getElementById('item_IDs').value = data.item_IDs;

      $("#target-table").empty();
      $('#target-table').append(data.table);
    }
  });
});

from Recent Questions - Stack Overflow https://ift.tt/3r7mjok
https://ift.tt/eA8V8J