javascript表单的附加动态功能

Question

我正在为动态javascript表单添加其他功能。最上面是表格，在表格下方，从表格中收集所有信息。该表单具有额外的功能可能性，但我很难将该信息添加到表中。如果我成功将其添加到表控制台，则在用户不想添加其他功能时会出现错误。这是当前的代码：

$(document).on('ready', function() {
$('form#search-form').bind('submit', function(event) {
    event.preventDefault();
    var tbody = $('#product-list > tbody');
    tbody.append('<tr><th scope="row" style="background-color:' + this['new-product-color'].value +
        '"><input type="checkbox" class="checkbox" /></th><td>' + this['product-name'].value +
        '</td><td>' + this['product-price'].value + '</td><td>' + this['product-link'].value +
        '</td><td>' + this['product-currency'].value + '</td><td>');
        // + this['additional-info'].value
    return false;
});

}）;

注释掉的是我的代码，如果我将其添加到tbody.append-part，则会向表中添加附加功能。我怎样才能做到这一点？

附加功能的代码：

$(document).ready(function() {
$("#add-new").click(function() {

      var newInput = $("<div class='newfeature'><p>Additional info <button id='remove'>Remove feature</button> </p> <input name='additional-info' value='' id='additional-info' type='text' class='searchbox' placeholder='Additional info'></div>");
      $('input#product-currency').after(newInput);
      $("#remove").click(function() {
        $(newInput).remove();
      });
    });
});