Why wont ID number jump to the next one

Question

There is a one section of orders page where users can add new fields to add new products. The problem here is, every time user adds new fields, new fields should have names as PRODUCTNAME1, PRODUCTNAME2, PRODUCTNAME3, and so on. Right now, every new field added has 1 value. Its stuck there. I hope I made some sense.

$('#AddProduct').click(function() {
    var i = 0;
    var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    
    $('#OrderProducts').append(adding);

    adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
        selectFirst: false
    }).result(function(event, data, formatted) {
        if (data) {
            adding.find(".UNITPRICE").val(data[1]);
            adding.find(".UNITPRICE").html(data[1]);
            adding.find(".PRODUCTID").val(data[2]);
            adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
            adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
        }
    });

    adding.find(".UNITQUANTITY").change(function()
    {
        adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
    });


    return false;
});

Answer 1

Take this bit of code, for example:

'<input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'"
    value="" class="width98" />'

You're giving each input a different name, but the same ID. Contrary to what Microsoft would have you think, the two are not interchangeable.

Answer 2

i is reset to 0 every time $('#AddProduct').click() is called; I don't think that's what you want. You would need i to be declared outside of the function that's passed into $('#AddProduct').click(). One way to do this would be through a closure.

(Note: I haven't tested this.)

var onClick = (function() {
    var i = 0;
    return (function () {
        var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    

        $('#OrderProducts').append(adding);

        adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
            selectFirst: false
        }).result(function(event, data, formatted) {
            if (data) {
                adding.find(".UNITPRICE").val(data[1]);
                adding.find(".UNITPRICE").html(data[1]);
                adding.find(".PRODUCTID").val(data[2]);
                adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
                adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
            }
        });

        adding.find(".UNITQUANTITY").change(function()
        {
            adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
            adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        });

        return false;
    });
})();

$('#AddProduct').click(onClick);

Answer 3

This code needs a lot of work. I do want to make just one suggestion though: rather than having a massive escaped HTML string within a javascript variable, you should just create a template DOM element and clone it when you need a copy of it:

$("#AddProduct").click(function(){
  var newProd = $("#template").clone().removeAttr("id").removeAttr("style");
  /* change values, then add to the DOM */
  $("#OrderProducts").append(newProd);
});

--

<div class="row1" id="template" style="display:none" >
  <div class="column width50">
    <input type="text" id="PRODUCTNAME" name="PRODUCTNAME1" value="" class="width98" />
    <input type="hidden" class="PRODUCTID" name="PRODUCTID" />
    <input type="hidden" class="UNITPRICE" name="UNITPRICE1" value="" />
    <input type="hidden" class="TOTALPRICE" name="TOTALPRICE1" value="" />
    <small>Search Products</small>
  </div>
  <div class="column width20">
    <input type="text" class="UNITQUANTITY" name="UNITQUANTITY1" value="1" class="width98" />
    <small>Quantity</small>
  </div>
  <div class="column width30">
    <span class="prices">
      Unit Price:<span class="UNITPRICE"></span><br />
      Total Price:<span class="TOTALPRICE"></span><br />
      <a href="#" id="RemoveProduct1">Remove</a>
    </span>
  </div>
</div>