クローン時にテーブルの行に対して動的IDが機能しない

Question

私はテーブルをクローンの行オプション付きにしています。私がタグのために行を複製するとき、入力IDはtext_0であり、以前の入力IDを取っていない。 タグの入力IDは、text_1、text_2、 'text_3 ...などのように増分する必要があります。以下 はHTMLです：

<table class="" id="table-data"> 
    <thead> 
    <tr> 
     <th> Qty</th> 
     <th>days</th> 
     <th>rate</th> 
     <th>rowtotal</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <input type="text" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty"> 
     </td> 
     <td> 
     <input type="text" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days"> 
     </td> 
     <td> 
     <input type="text" autocomplete="off" name="rate[]" placeholder="Rate" class="form-control rate"> 
     </td> 

     <td> 
     <input type="text" autocomplete="off" readonly="" name="row_total[]" id="row_total0" placeholder="Row Total" class="form-control rowTotal"> 
     <a class="Comment" data-toggle="modal" data-target="#commentModal"><input type="" id="text_0"></a> 
     </td> 
     <td> 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
      <button type="button" class="addline btn btn-sm btn-primary">+</button> 
      <button type="button" class="delete btn btn-sm btn-danger">-</button> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

のjQuery：

$(document).on('click', '.addline', function() { 
    var $tr = $(this).closest('tr'); 
    var $lastTr = $tr.closest('table').find('tr:last'); 
    var $clone = $lastTr.clone(); 
    $clone.find('td').each(function() { 
    var el = $(this).find(':first-child'); 
    var id = el.attr('id') || null; 
    if (id) { 
     var i = id.substr(id.length - 1); 
     var prefix = id.substr(0, (id.length - 1)); 
     el.attr('id', prefix + (+i + 1)); 
    } 
    }); 

    $clone.find('input:text').val(''); 
    $tr.closest('tbody').append($clone); 

}); 
$(document).on('click', '.delete', function() { 
    //dont delete the last data row 
    var parentId = $(this).closest('table').attr('id'); 

    if ($('#' + parentId + ' tr').length > 2) { 
    var $tr = $(this).closest('tr'); 
    $tr.remove(); 
    } 
    return false; 
}); 

どのように私はまた、タグ入力用のIDを変更します。何か提案してください？

js fiddle demo here

Answer 1

コード/挙動は少し紛らわしいですが、elは、変更したいidのための親要素の両方にマッチする、長さ2の集合体であることが表示されます。しかし、elをループしていないので、idが1つだけ設定されています。そして、古典的なjQueryのスタイルで、それは静かにマッチしたセットにすべてに起こっている：

el.attr('id', prefix + (+i + 1)); 

代わりに、elをループし、それぞれを個別に設定します。このような何か：

var el = $(this).find(':first-child'); 
$(el).each(function() { // loop over the matched set here 
    var id = $(this).attr('id') || null; // target the item in the loop 
    if (id) { 
    debugger; 
    var i = id.substr(id.length - 1); 
    var prefix = id.substr(0, (id.length - 1)); 
    $(this).attr('id', prefix + (+i + 1)); // target the item in the loop 
    } 
}); 

Updated jsFiddle