JavaScript to show extra form fields

Question

I have a form that has a block called "Product", containing text inputs. Inside that block, the user can press "add item" and have the JS show one more field. Till now everything works.

I've tried to add a function for adding a new "Product" block but no luck. Do you have any hints for me?

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 :(

Any help will be appreciated.

Thank you!

Update: Here is the JS for the Item and Price fields:

<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

Maybe make a table and add new rows?

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);
}

I think this should work...