Блог

У меня есть форма, в форме есть кнопка (знак ), которая добавляет строку для вставки значения.В моей форме я могу ввести значение в первой строке обоих полей ( stationerytype и stationeryqty ). Но как только я добавляю новую строку, нажимая кнопку «Плюс», я не могу вставить какое-либо значение в staionerytype поле второй строки, пока я могу вставить значение в stationeryqty поле второй строки.

Мой код:

  <table   class="table table-bordered" id="tb" >
    <tr class="tr-header">
    
    <th class= "col-md-1" align="centre">Sl.No.</th>
    <th class= "col-md-6" align="centre">STATIONARY TYPE</th>
    <th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
    <th class= "col-md-1"><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Stationery"><span class="glyphicon glyphicon-plus"></span></a></th>
    
    </tr>
    <tr>
    <?php
    for($i=1;$i<=1;$i  )
    {   
    ?>
    
    <td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>"  ></td>
    <td><select  id="stationerytype" name="stationerytype[]"  autocomplete="off">
<option >Stationery Name</option>
<?php $sql = "SELECT stationerytype from tblstationerytype order by stationerytype ASC ";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{   ?>                                            
<option value="<?php echo htmlentities($result->stationerytype);?>"><?php echo htmlentities($result->stationerytype);?></option>
<?php }} ?>
</select></td>
    <td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
    
    <td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
    </tr>
    <?php  }?>
    </table>
    
    <button type="submit" name="add" class="btn btn-info"  align="middle" >ADD </button>  
  

Код Java script приведен ниже

     <script>
    var max = 4;
    var count = 1;
    $(function(){
        $('#addMore').on('click', function() {
                if(count <= max ){
                  var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
                  data.find("input").val('');
                  debugger;
                  data.find("input")[0].value=  count;
                }else{
                 alert("Sorry!! Can't add more than five samples at a time !!");
               }
                  
         });
         $(document).on('click', '.remove', function() {
             var trIndex = $(this).closest("tr").index();
                if(trIndex>1) {
                 $(this).closest("tr").remove();
               } else {
                 alert("Sorry!! Can't remove first row!");

         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
             count--;
             
             // get all the rows in table except header.
             $('#tb tr:not(.tr-header)').each(function(){
             $(this).find('td:first-child input').val(this.rowIndex);
             })
               }
          });
    }); 
     
    </script>
                                </div>