如何将具有不同id标记和文本的html元素附加到javascript中？

我的当前页面看起来像这样，没有输入框。我遇到的问题是输入。我将有多个控件具有相同的id名称，并且我希望每行的值不同。我应该做些什么来实现自动化？如果我硬编码它，我仍然会在每个循环迭代中得到相同的ID标记。我的目标是能够在最后添加和删除整个目标群体

Target Name: text <--- what it looks like now
Command Line: [ input box ] <----- desired output
Build Env: [ input box ]
Rel Out: [ input box ]
Rel Log: [ input box ]
Dep: [ input box ]

目标名称：文本

如果将唯一标识符与记录数据一起传递，则可以将该标识符添加到每一行。这样的任务不需要元素ID

/* add identifier to start of row */
var row = $('<tr data-id="'+records[i].id +'"></tr>');

添加单元格：

row.append($('<td>').html("Command Line: " + inputTemplate( records[i].CommandLine, 'Command')));

---

同一页面上不能有多个id相同的HTML元素。这就是类的用途。Id应该保持唯一，您可以给它们不同的名称。

/* add identifier to start of row */
var row = $('<tr data-id="'+records[i].id +'"></tr>');

function inputTemplate( value, type){
  return ' <div class="control-group">'+
              '<div class="controls">'+
                    '<input type="text" value="'+value+'" data-type="'+type+'" />'+
              '</div>'+
           '</div>';
}

row.append($('<td>').html("Command Line: " + inputTemplate( records[i].CommandLine, 'Command')));

$('.controls input').change(function(){
    var rowId = $(this).closest('tr').data('id');
    var newValue=$(this).val();
    var fieldType= $(this).data('type')
    alert('new value for  '+ fieldType +' in row ' + rowId +' is ' + newValue );
    updateServer( rowId, fieldType, newValue);
})