How do you handle HTML element IDs and Javascript references when adding line items using Javascript?

Question

First off, I read all of the suggested questions that sounded halfway relevant and didn't find anything that addressed my issue. Second, if this is already addressed somewhere, I didn't search well enough for it. Finally, on to the problem. :D

I have a page that has a 'line item' on it. A 'line item', for our purposes, is simply a bunch of HTML elements in a horizontal row that form a line of HTML inputs (for example, imagine columns such as Pieces, Description, Weight, Unit Rate, Total Rate). One of the HTML controls in our line item is actually a custom server control that emits some Javascript. Among other things, the Javascript news up an object of type X like so:

var whatever = new X(constructor values);

Now, the user can add line items with an Add button. Currently, I'm simply cloning a clean copy of the HTML that forms the line item. This also clones the Javascript code so that now, every line item has the var whatever = new X(constructor values);. This presents a problem in that there are several lines all referencing the same Javascript variable (namely, whatever).

This, of course, ruins everything b/c I need to reference each of the whatever's as separate instances, not the same instance. I'm wondering if there are approaches to handling this situation. How do I use the custom server control but still reference the Javascript that each row emits? Or how do I create a new line item in a way that avoids this issue?

I'm new to the whole modify-the-DOM-using-Javascript arena, and I can't seem to find any best practices or examples that are helpful so I'm at a bit of a loss.

Does all this make sense? If not, please let me know what doesn't and I'll try to clear it up as best I can.

THANKS!!!

EDIT: Here's a small code sample.

This is exactly what the JavaScript object declaration looks like:

var example = new SmartDropDown('uomSDD','75','1','7','','','','',2);

The first parameter is the HTML ID of one of the elements that renders and because of that reason I couldn't just use an array (as mentioned in one of the answers; awesome answer, though, until I realized I'd forgotten to mention that detail). I'd need to come up with a way to change the ID and use the array.

Some of the methods on the SmartDropDown object are ShowOptions, HideOptions, BindOptions.

As for the code that's called when the button is clicked, here it is:

function AddLineItem()
{
    var lineItemsParent = $("lineItems");
    var newRow = lineItemTemplateNode.cloneNode(true);
    lineItemsParent.appendChild(newRow);
}

So, to summarize, the line item HTML contains the usual stuff: inputs, selects, spans, etc and then the JS declaration listed above. And because of the way I'm adding a new line item (using the code above), the JS variable gets cloned, too. And I need a way to 1) change the ID of the element and 2) keep track of all the JS references (an array has already suggested).

Answer 1

I think I'll need a little bit more info to be able to give you a good answer on this one. Could you show some example code how this function of yours is called, what is assigned to var whatever and other information you want/can give away. The more the better!

I'll gladly help if I can.

Answer 2

This is where JavaScript frameworks are really handy. Many have good constructors that make this type of thing easy. For example, using Prototype, I can do this:

function buildMe(counter) {
    var tempHTML = new Element('div',{'id':'bleh'+counter,className:'product'})
    tempHTML.insert(new Element('a',{className:'prodTitleLinkA',href:'/here'})

    $('someDiv').insert(tempHTML)
    Event.observe('bleh'+count, 'click', function(event) {
       alert(element.id)
    });
}

This creates a few elements, and connects an event to them. I can keep shoving as many as I want into "someDiv", each with its own ID and event.

Answer 3

Use an array?

   var lineItems = [];
   ...
   // when the button is clicked
   lineItems[lineItems.length] = new X(constructor values);

If you need to generate a new id at the same time, you can prepend a string to the array index.

   var lineItems = [];
   ...
   // when the button is clicked
   var id = 'item_' + lineItems.length.toString()
   lineItems[lineItems.length] = new X(id, ...);