jQuery插入表行并增加输入ID

Question

I have a dynamic html table/form that has two buttons to add a row to the table. One button adds a row to the end of the table and increments the input id appropriately. The other button is intended to insert a row before the current row... which it can do until I attempt to have it increment the id. My current jquery code updates the id appropriately but strips out the tags which results in all of the input fields being smashed into a single cell of the table. I've included my existing code snippets below. . . what am I missing?

link to fiddle

jquery code:

$(document).on('click', 'button.insertbutton', function () {
    var rowCount = $('#orderDetail tr').length;
    alert(rowCount);
    $(this).closest('tr').before($(this).closest('tr').find('input')
        .each(function() {
        $(this).attr({
          'id':  function(_, id) { 
            var regex = /[a-zA-Z]+/
            return id.match(regex) + rowCount },
          //'name':  function(_, name) { return name + rowCount },
           'value': '',
        });
      })
    ).clone(true);
    return true;
});

I suspect the issue is within the section where I iterate through the input items and then clone back the row.

Any guidance would be much appreciated.

EDITED TO INCLUDE FIDDLE AS RECOMMENDED... THANK YOU FOR THE RECOMMENDATION.

Answer 1

I was able to solve the clone and increment ID by breaking up the operation into two steps vs trying to acomplish the task in a single line. The jquery code for the insert and update id is as follows:

$(document).on('click', 'button.insertbutton', function () {
var rowCount = $('#orderDetail tr').length;
$(this).closest('tr').before($(this).closest('tr').clone());
$(this).closest('tr').find('input').each(function() {
    $(this).attr({
        'id': function(_,id) {
            var regex = /[a-zA-Z]+/
            return id.match(regex) + rowCount },
        'value': '',
    })
})

return true;

});

I hope this helps someone in the future