Laravel 5.6 / Javascript: Как добавить форму с динамическими полями ввода в динамически генерируемую таблицу

Question

Я разрабатываю приложение, в котором есть раздел, в котором клиент получает новый товар. Этот раздел содержит корзину.Пользователь ищет товар, затем добавляет его в корзину. Затем пользователь может указать количество и добавить серийные номера полученных товаров. Ниже приведен код и структура корзины:

 <table class="table table-bordered table-striped" >
              <thead>
              <tr>

                <th>Item</th>
               <th>Stock Qty</th>
               <th>Serials</th>
                <th>Price</th>
                <th>Order Qty</th>
                <th>Total Price</th>

                  <th>Delete</th>
                </tr>
              </thead>
            <tbody>
              @foreach($rawm as $raw )
              <tr>
                <td>{{$raw->mname}}</td>
                <td>{{$raw->pquant.' '.$raw->units}} </td>
                <td><div class="form-group">
                   @if($raw->serial==1)  
     <a href="#" data-toggle="modal" data-target="#modal-def{{$raw->gr}}" class="label  bg-blue" ><i class="fa fa-plus"></i>  <b>Add Serials</b></a>
    <div class="modal fade" id="modal-def{{$raw->gr}}">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Serials For <b>:</b> {{$raw->mname}} </h4>
              </div>
              <form    action="{{'/rec_serials'}}" method="GET">
           {{csrf_field()}}
              <div class="modal-body">

                  <input type="hidden" name="cart_id"   value="{{$raw->grt}}">

                    <input type="hidden" name="pid"   value="{{$raw->gr}}">
                                    <script type="text/javascript">
         function add_row()
            {
          $rowno=$("#employee_table tr").length;
          $rowno=$rowno+1;
          $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text'  name='serial[]' class='form-control' style='width: 100%;' autocomplete='off'></td><td><input type='button' class='btn btn-danger' value='-' onclick=delete_row('row"+$rowno+"')></td></tr>");
    }

    function delete_row(rowno)
    {
     $('#'+rowno).remove();
    }
</script>

              <div class="form-group">
              <table id="employee_table" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
         <th>Serials</th> 


      <th>Add</th> 
        </tr>


      </thead>
   <tr id="row1">

 <td> <input type="text"  name="serial[]" class="form-control" autocomplete="off" /></td>

      <td><input type="button" onclick="add_row();" class="btn btn-info" value="+"></td>
   </tr>
  </table>

   </div>
         </div>
                   <div class="modal-footer">


                                    <button type="submit" name="submit"class="btn btn-primary">Add Serials</button>
                </form>
                   </div>
            `          `</div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

      </div>
                            @else
         <center><b>N/A</b></center>
                        @endif
              </div>
                </td>
                <td width="150">
 <div class="form-group">
 <div class="input-group">

                <span class="input-group-addon">Ksh.</span>
                <input type="text" class="" name="bp" onChange="in_price({{$raw->gr}}, '{{$raw->bp}}')" id="input-price-{{$raw->gr}}" value="{{$raw->bp}}"  autocomplete="off" >

              </div>
</div>

                </td>

                <td><div class="cart-info quantity" style="width: 99px;">
                    <div class="btn-increment-decrement" onClick="decrement_quantity({{$raw->grt}}, '{{$raw->bp}}')">-</div>
                    <input class="input-quantity"
                        id="input-quantity-{{$raw->grt}}" value="{{$raw->cquant}}" onChange="in_quantity({{$raw->grt}}, '{{$raw->bp}}')">
                        <div class="btn-increment-decrement"
                        onClick="increment_quantity({{$raw->grt}}, '{{$raw->bp}}')">+</div>
                </div></td>
                <td><div class="cart-info price" id="cart-price-{{$raw->grt}}">
                  {{'Ksh.'.$raw->bp * $raw->cquant}}
                    </div></td>
                <td><div class="">
                    <a href="{{'destroy/'.$raw->grt}}"
                        class="btnRemoveAction"><img
                        src="/dist/img/icon-delete.png" alt="icon-delete"
                        title="Remove Item" /></a>
                </div></td>

              </tr>
              @endforeach
            </tbody>
          </table>
</div>

Пользователь может иметь несколько товаров в корзине.Проблема заключается в том, что когда в корзину добавляется более одного элемента, динамическая форма для добавления серийных номеров работает только для первого элемента.Я не могу добавить дополнительные поля ввода для последующих элементов в корзине. Если я нажимаю кнопку Добавить, он по-прежнему добавляет поля ввода в первой форме.