jQuery how to add unique id to dynamic form input fields
<p>I have this form created using Laravel blade template and made it dynamic using jQuery. now i can populate table rows with all the input fields in it. now i'm trying to get ajax data in to those fields on change select value in first column. it only works on first row because there is no unique id for each input field. please help me to fix this.</p>

<p><strong>following code used in form on blade template</strong></p>

<pre><code>&lt;tr id="1"&gt;
        &lt;td&gt;
            {!! Form::select('item_id[]', ['' =&gt; 'Select an item'] + $items, null, array('class' =&gt; 'form-control', 'id' =&gt; 'itemId', 'required')) !!}
        &lt;/td&gt;
        &lt;td&gt;
            {!! Form::text('item_description[]', null, ['class' =&gt; 'form-control', 'id' =&gt; 'item_description', 'placeholder' =&gt; 'Not Required | Optional']) !!}
        &lt;/td&gt;
        &lt;td&gt;
            {!! Form::text('units[]', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Add Units', 'required']) !!}
        &lt;/td&gt;
        &lt;td&gt;
            {!! Form::text('rate[]', null, ['class' =&gt; 'form-control', 'id' =&gt; 'rate', 'placeholder' =&gt; 'Add Rate', 'required']) !!}
        &lt;/td&gt;
        &lt;td&gt;
            {!! Form::text('amount[]', null, ['class' =&gt; 'form-control', 'placeholder' =&gt; 'Add Hrs and Rate', 'id' =&gt; 'amount']) !!}
        &lt;/td&gt;
        &lt;td class="text-center actions"&gt;&lt;a id="delete-row" onclick="delTableRow($('#dynamic-tbl'));" href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p><strong>Following code used to populate more rows with same input fields</strong></p>

<pre><code>/*
 * Dynamic table row adding and deleting functions
 */
function addTableRow(jQtable){
    var rowId = parseInt($('#dynamic-tbl tbody tr:last').attr('id'));
    ++rowId;
   // console.log(rowId);
    jQtable.each(function(){
        var tds = '&lt;tr id='+rowId+'&gt;';
        jQuery.each($('tr:last td', this), function() {tds += '&lt;td&gt;'+$(this).html()+'&lt;/td&gt;';});
        tds += '&lt;/tr&gt;';
        if($('tbody', this).length &gt; 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}
</code></pre>

<p>in here <code>$(this).html()</code> duplicate the inner html from previous row. i'm trying to add an unique id for each input field.</p>

<p><strong>and following code used to get data using ajax</strong> </p>

<pre><code>/*
 * Estimate Item Description Ajax function
 */
$('#dynamic-tbl #itemId').change(function(e) {
    //console.log(e);
    var item_id = e.target.value;
    //ajax
    $.get('/ajax-item?item_id=' + item_id, function(data){
        //success data
        //console.log(data);
        $('#item_description').empty();
        $('#rate').empty();
        $.each(data, function(index, itemObj){
            $('#item_description').val(itemObj.name);
            $('#rate').val(itemObj.sale_price);
        });
    });
});
</code></pre>