JQuery appendto html being appended to wrong place

Question

I'm having what I think is probably a simple JQuery issue, but it is causing me a big headache. First, I've only been writing JQuery for a few weeks, so my code is weak.

Based on selection option and button click I display some HTML. The HTML displayed has buttons which can also be clicked to display additional HTML. The problem I am having is when I display the same "parent HTML" twice and click the button to display the "child HTML" If I click the button to add "child HTML" to my original "parent HTML" after adding the second "parent HTML" the "child HTML" from the first parent is added to that of the second parent. I've attempted to increment my id/class variables to resolve my issue, but without success.

\$('#productbtn').live('click', function(e) {
(comtrinc++);
(ctierinc++);
if (\$('#prodselect option:selected').text() == "Commercial Attachments"){
\$('#my_table > tbody > tr').eq(14).after('<tr id="comattach0'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><tr name="commercial" id="comattach1'+(comtrinc)+'"><td ALIGN=left colspan=4><input id="buttonremc'+(comtrinc)+'" type="button" style="width: 110px; height: 22px;" value="Remove Product">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=4><b><font color="#ADD8E6">Product: &nbsp;Commercial Attachments</b></font></td></tr><tr id="comattach2'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach3'+(comtrinc)+'"><td align=left><font color="#ADD8E6">Activity Type:</td><td align=left><select name="caacttype'+ (cainc++) +'" style="width:87px;"><option></option><option value="send">Send</option><option value="rec">Receive</option><option value="view">View</option></select></td><TD ALIGN=left><font color="#ADD8E6">Monthly Commission Percentage:</TD><TD ALIGN=left><input type="text" name="mthcom" maxlength=3 size=10 value="00"></TD><tr id="comattach4'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach5'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Annual Flat Rate:</TD><TD ALIGN=left><input type="text" name="afr'+ (afrinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Monthly Flat Rate:</TD><TD ALIGN=left><input type="text" name="mfr'+ (mfrinc++) +'" size=10 value="00.00" ></TD><TR id="comattach6'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Monthly Flat Rate Attachment Limit:</TD><TD ALIGN=left><input type="text" name="mfral'+ (mfralinc++) +'" size=10 ></TD><TD ALIGN=left><font color="#ADD8E6">Excess Attachment Rate:</TD><TD ALIGN=left><input type="text" name="ear'+ (earinc++) +'" size=10 value="00.00" ></TD><tr id="comattach7'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach11'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Minimum Monthly Charge:</TD><TD ALIGN=left><input type="text" name="minmc'+ (minmcinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Maximum Monthly Charge:</TD><TD ALIGN=left><input type="text" name="maxmc'+ (maxmcinc++) +'" size=10 value="00.00" ></TD><tr id="comattach15'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach8'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Per Attachment Rate:</td><TD ALIGN=left><input type="text" name="par'+ (parinc++) +'" size=10 value="00.00" ></TD><td colspan=2>&nbsp;</td><TR id="comattach10'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Maximum Allowed Attachment Pages:</TD><TD ALIGN=left><input type="text" name="maap'+ (maapinc++) +'" size=10 ></TD><TD ALIGN=left><font color="#ADD8E6">Excess Page Rate:</TD><TD ALIGN=left><input type="text" name="epr'+ (eprinc++) +'" size=10 value="00.00" ></TD><tr id="comattach12'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><tr id="comattach13'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Per Page Rate:</TD><TD ALIGN=left><input type="text" name="ppr'+ (pprinc++) +'" size=10 value="00.00" ></TD><td colspan=2>&nbsp;</td><TR id="comattach14'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Minimum Submission Charge:</TD><TD ALIGN=left><input type="text" name="minsc'+ (minscinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Maximum Submission Charge:</TD><TD ALIGN=left><input type="text" name="maxsc'+ (maxscinc++) +'" size=10 value="00.00" ></TD><tr class="comattach9'+(comtrinc)+'"><td colspan=4><input id="addtiercom'+(comtrinc)+'" type="button" style="width: 110px; height: 22px;" value="Add Tier"></td></tr>');


\$('#buttonremc').click(function() {
\$('#comattach0, #comattach1, #comattach2, #comattach3, #comattach4, #comattach5, #comattach6, #comattach7, #comattach8, .comattach9, #comattach10, #comattach11, #comattach12, #comattach13, #comattach14, #comattach15').remove();
})
var raisetierid = 1;
var rateplus = 1;
     var rangeplus = 1;
var catierrate = 1;
var rangemin = 1;
var rangemax = 1;

\$('#addtiercom'+(comtrinc)+'').live('click', function(e) {
\$('<tr id="commtier1'+(ctierinc)+'"><td colspan=4><input id="addnewtier'+(ctierinc)+'" type="button" style="width: 110px; height: 20px;" value="Add Tier" >&nbsp;&nbsp;<input id="removetiercom" type="button" style="width: 110px; height: 20px;" value="Remove Tier" ></td></tr><TR id="commtier2'+(ctierinc)+'"><TD ALIGN=left><font color="#ADD8E6">Tier Type</TD><TD ALIGN=left colspan=3>&nbsp;&nbsp;Attachments<input type="radio" name="brackettype" value="a">&nbsp;&nbsp;&nbsp;Pages<input type="radio" name="brackettype" value="p">&nbsp;&nbsp;&nbsp;Offices<input type="radio" name="brackettype" value="o"></TD><tr class="inctier'+(ctierinc) + (raisetierid++)+'"><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rateplus++) +' Rate</TD><TD ALIGN=left><input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rangeplus++) +' Range</TD><TD ALIGN=left><font color="#ADD8E6">Minimum&nbsp;<input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6">&nbsp;Maximum&nbsp;<input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD>').appendTo('.comattach9'+(comtrinc)+'');

\$('.comattach9'+(comtrinc)+'').hide();

\$('#addnewtier'+(ctierinc)+'').live('click', function(e) {
\$('<tr class="inctier'+(ctierinc) + (raisetierid++) +'"><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rateplus++) +' Rate</TD><TD ALIGN=left><input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rangeplus++) +' Range</TD><TD ALIGN=left><font color="#ADD8E6">Minimum&nbsp;<input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6">&nbsp;Maximum&nbsp;<input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD>').appendTo('.inctier'+(ctierinc)+'1');

})

Answer 1

I believe it was an id conflict problem. I switched to classes on the buttons and added some if, if else conditional loops to determine the variable value being appended to the tr ids.

http://jsfiddle.net/JXeMS/30/

$