dynamic data filling for table rows. Laravel, jQuery

I create an application in which, according to the search result, it is necessary to dynamically fill the table with data. Rows in the table can be from 1 to 2000. Here are the pieces of code: table and js - add/delete row

$(document).ready(function(){
                        var i=1;
                        $("#add_row").click(function(){b=i-1;
                            $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
                            $('#tab_product').append('<tr id="addr'+(i+1)+'"></tr>');
                            i++;
                        });
                        $("#delete_row").click(function(){
                            if(i>1){
                                $("#addr"+(i-1)).html('');
                                i--;
                            }
                           
                        });
                        });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table  id="tab_product" >
             <thead >
                  <tr >
                     <th> # </th>
                     <th >Barcode </th>
                     <th >Name </th>
                     <th > Artikul </th>
                   </tr>
              </thead>
              <tbody>
                   <tr id='addr0'>
                      <td >1</td>
                      <td ><input name="barcode[]"></td>
                      <td ><input  name="name[]"  data-prod-id=""/></td>
                      <td><input name="partikul[]" /></td>
                      <td><button id="searh"  data-toggle="modal" data-target="#myModalBox" href="#myModalBox">Search</button></td>
                    </tr>
                    <tr style="border: 0" id='addr1'></tr>
                   </tbody>
                 </table>
                       
                        
                 <button id="add_row" >Add row</button>
                 <button id='delete_row' >Delete row</button>
<!--ModalBox-->
<div id="myModalBox">
  <div class="modal-dialog ">
        <div class="modal-content">

     <input  name="search" id="search"  placeholder="Search" />

                            
           <table >
                                    
           <tbody id="prod_search">

            </tbody>
            </table>
 </div>
  </div>
   </div>

In the modal window, a full-text search of the product from the database

 $(document).ready(function(){

            fetch_customer_data();

            function fetch_customer_data(query = '')
            {
                $.ajax({
                    url:"",
                    method:'GET',
                    data:{query:query},
                    dataType:'json',
                    success:function(data)
                    {
                        $('tbody[id="search"]').html(data.table_data);
                        $('#total_records').text(data.total_data);
                    }
                })
            }

            $(document).on('keyup', '#search', function(){
                var query = $(this).val();
                fetch_customer_data(query);
            });
        });

selection from the database in the controller live_search

I get the id of the selected (required) product. But there is absolutely no understanding — how now to insert on the basis of this id data (name, etc.) into the table in accordance with the row id () and do so many times as necessary. Thank you for any comments and help. Encourage understanding please. And as I understand it, the necessary data is already in ajax.

via Chebli Mohamed