JavaScript, чтобы показать дополнительные поля формы

Question

У меня есть форма, которая имеет блок под названием «Продукт», содержащий текстовые входы. Внутри этого блока пользователь может нажать «добавить элемент» и показать JS еще одно поле. До сих пор все работает.

Я попытался добавить функцию для добавления нового блока «Продукт», но не повезло. У вас есть какие-то намеки на меня?

Product 
Item: <input> Price: <input> 
Item: <input> Price: <input> 
       <a>add item</a> <- this works 

<a>add Product</a>    <- this is the part that I can't figure out :(

Любая помощь будет оценена по достоинству.

Спасибо!

Update: Вот JS для Вещей и цен полей:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var counter = 2; 
    $("b.add-item").click(function() { 
    if(counter>5){ alert("Max 6 items allowed"); return false; } 
    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 
    newTextBoxDiv.after().html(
      '<span class="item">' + 
      '<label>Item:</label>'+ 
      '<input type="text" name="item1[]" id="textbox' + counter + '" value="" >' + 
      '<label>&nbsp;&nbsp;&nbsp;Price:</label>'+ 
      '<input type="text" name="price1[]" id="textbox' + counter + '" value="" >' +  
      '</span>' 
      ); 
    newTextBoxDiv.appendTo(".items"); 
    counter++; 
    }); 
    $("b.remove-item").click(function() { 
    if(counter==1){alert("No more textbox to remove"); 
    return false; }  counter--; 
    $("#TextBoxDiv" + counter).remove();}); 
    $("#getButtonValue").click(function() { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); }alert(msg); }); 
    }); 
</script> 

Answer 1

Может быть сделать таблицу и добавить новые строки?

HTML:

<table id="myTable"> 
    <tr> 
    <th>Item</th> 
    <td><input /></td> 
    <th>Price</th> 
    <td><input /></td> 
    </tr> 
    <tr> 
    <th>Item</th> 
    <td><input /></td> 
    <th>Price</th> 
    <td><input /></td> 
    </tr> 
</table> 
<a onclick="add_row(); return false;">Add Product</a> 

JavaScript:

function add_row() 
{ 
    var table = document.getElementById('myTable'); 
    if(!table) return; 
    // Table row 
    var row = document.createElement('row'); 
    table.appendChild(row); 
    // "Item:" 
    var th1 = document.createElement('th'); 
    th1.innerText = 'Item:' 
    row.appendChild(th1); 
    // Item input 
    var td1 = document.createElement('td'); 
    row.appendChild(td1); 
    var input1 = document.createElement('input'); 
    td1.appendChild(input1); 
    // "Price:" 
    var th2 = document.createElement('th'); 
    th2.innerText = 'Price:' 
    row.appendChild(th2); 
    // Price input 
    var td2 = document.createElement('td'); 
    row.appendChild(td2); 
    var input2 = document.createElement('input'); 
    td1.appendChild(input2); 
} 

Я думаю, что это должно работать ...