Блог

я создаю динамически добавляемую строку в таблице формы и использую select2 в поле для поиска элемента. select2 отлично работает в 1-й строке. но после добавления другой строки в форму select2 не работает.
мой код формы: как я могу это решить, и в соответствии с select2 работает отлично.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<form action="" id="invoice-form" method="post" class="invoice-form" role="form" novalidate=""> 
        <div class="load-animate animated fadeInUp">
            <div class="row">
                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                    <h2 class="title">Saif Powertec Ltd</h2>
                    <?php include('menu.php');?>    
                </div>                  
            </div>
            <input id="currency" type="hidden" value="$">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <h3>From,</h3>
                    <?php echo $_SESSION['user']; ?><br>    
                    <?php echo $_SESSION['address']; ?><br> 
                    <?php echo $_SESSION['mobile']; ?><br>
                    <?php echo $_SESSION['email']; ?><br>   
                </div>              
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
                    <h3>To,</h3>
                    <div class="form-group">
                        <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Company Name" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="3" name="address" id="address" placeholder="Your Address"></textarea>
                    </div>
                    
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <table class="table table-bordered table-hover" id="invoiceItem">   
                        <tr>
                            <th width="2%"><input id="checkAll" class="form-control" type="checkbox"></th>
                            <th width="15%">Item No</th>
                            <th width="38%">Item Name</th>
                            <th width="15%">Quantity</th>
                            <th width="15%">Price</th>                              
                            <th width="15%">Total</th>
                        </tr>                           
                        <tr>
                            <td><input class="itemRow" type="checkbox"></td>
                            <td><input type="text" name="productCode[]" id="productCode_1" class="form-control" autocomplete="off"></td>
                            
                            
                            <td><select class="select2 form-control" id="productName_1" name="productName[]"><option value="" selected="selected">Select Item</option><option value="1">pAPER</option><option value="2">KirloskarGREEN</option></select></td>
                            
                            <td><input type="number" name="quantity[]" id="quantity_1" class="form-control quantity" autocomplete="off"></td>
                            <td><input type="number" name="price[]" id="price_1" class="form-control price" autocomplete="off"></td>
                            <td><input type="number" name="total[]" id="total_1" class="form-control total" autocomplete="off"></td>
                        </tr>                       
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                    <button class="btn btn-danger delete" id="removeRows" type="button">- Delete</button>
                    <button class="btn btn-success add_more_item" id="addRows" type="button">  Add More</button>
                </div>
            </div>
            <div class="row">   
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    <h3>Notes: </h3>
                    <div class="form-group">
                        <textarea class="form-control txt" rows="5" name="notes" id="notes" placeholder="Your Notes"></textarea>
                    </div>
                    <br>
                    <div class="form-group">
                        <input type="hidden" value="<?php echo $_SESSION['userid']; ?>" class="form-control" name="userId">
                        <input data-loading-text="Saving Invoice..." type="submit" name="invoice_btn" value="Save Invoice" class="btn btn-success submit_btn invoice-save-btm">                     
                    </div>
                    
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <span class="form-inline">
                        <div class="form-group">
                            <label>Subtotal: amp;nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="subTotal" id="subTotal" placeholder="Subtotal">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Tax Rate: amp;nbsp;</label>
                            <div class="input-group">
                                <input value="" type="number" class="form-control" name="taxRate" id="taxRate" placeholder="Tax Rate">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Tax Amount: amp;nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="taxAmount" id="taxAmount" placeholder="Tax Amount">
                            </div>
                        </div>                          
                        <div class="form-group">
                            <label>Total: amp;nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="totalAftertax" id="totalAftertax" placeholder="Total">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Amount Paid: amp;nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="amountPaid" id="amountPaid" placeholder="Amount Paid">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Amount Due: amp;nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="amountDue" id="amountDue" placeholder="Amount Due">
                            </div>
                        </div>
                    </span>
                </div>
            </div>
            <div class="clearfix"></div>                
        </div>
    </form>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
  

и мой код для динамически добавляемой строки с select2:

     <script>




var count = $(".itemRow").length;
    $(document).on('click', '#addRows', function() { 
        count  ;
        var htmlRows = '';
        htmlRows  = '<tr>';
        htmlRows  = '<td><input class="itemRow" type="checkbox"></td>';          
        htmlRows  = '<td><input type="text" name="productCode[]" id="productCode_' count '" class="form-control" autocomplete="off"></td>';     
        
        
        htmlRows  = '<td><select class="select2 form-control" id="productName_' count '" name="productName[]"><option value="" selected="selected">Select Item</option><option value="1">pAPER</option><option value="2">KirloskarGREEN</option></select></td>';    
        
        
        htmlRows  = '<td><input type="number" name="quantity[]" id="quantity_' count '" class="form-control quantity" autocomplete="off"></td>';        
        htmlRows  = '<td><input type="number" name="price[]" id="price_' count '" class="form-control price" autocomplete="off"></td>';      
        htmlRows  = '<td><input type="number" name="total[]" id="total_' count '" class="form-control total" autocomplete="off"></td>';          
        htmlRows  = '</tr>';
        $('#invoiceItem').append(htmlRows);
    }); 




    $(".select2").select2();
    $('.add_more_item').click(function(e) {
    
        $latest_tr  = $('#req_table tr:last');
      $('select.select2').select2('destroy');
    
        $clone          = $latest_tr.clone();
    
        $latest_tr.after($clone);
        $('select.select2').select2();
        $clone.find(':text').val('');
        item  ;
        show_hide_item(item);
    });
    
    
    </script>
  

Дайте каждому выбору уникальный идентификатор и при добавлении новой строки. вызов

 $('#idselect2").select2(); 
  

где idselect2 идентификатор выбора.
Идентификатор может быть «select2» со счетчиком, увеличивающимся на единицу при каждом нажатии на кнопку добавления

$( #select2${id} ).select2();