Unique IDs while using jQuery to append HTML Object

Question

I have an HTML form where I append some HTML objects using jQuery to keep the code clean(ish).

<span id="object_1"></span><span id="anotherobject_1"></span>
<span id="object_2"></span><span id="anotherobject_2"></span>

(in total there is seven of these "object - anotherobject"-constructs)

I append a simple text input and a select box seven times:

for (i = 0; i < 8; i++) {
$("#object_" + i).append("\
<input style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");

}

So now my problem is, if I gave the two objects an ID inside the javascript, I end up with seven objects having the same ID, that's a problem of course if I try to get access to their specific values... what can I do?

Thanks in advance :)

Answer 1

You can do as below:

for (i = 0; i < 8; i++) {
    $("#object_" + i).append("\
         <input id='txt_"+i+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");

$("#anotherobject_" + i).append("\
            <select id='select_"+i+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                    <option value='1'>1</option>\
                    <option value='2'>2</option>\
                    <option value='3'>3</option>\
                    <option value='4'>4</option>\
                    <option value='5'>5</option>\
                    <option value='6'>6</option>\
                    <option value='7'>7</option>\
                    <option value='8'>8</option>\
                </select>");
}

Just use the i value you are referring to get each object and anotherobject

You can simply do it as below using $.each too

$.each($("span[id^='object_']"),function(key){
    $(this).append("<input id='txt_"+key+"' style='display: inline; margin-left: 15px; margin-right: 5px;  height: 15px; width:25px;' type='text'>");
});

$.each($("span[id^='anotherobject_']"),function(key){
          $(this).append("<select id='select_"+key+"' style='display: inline; margin-left:  margin-top: -10px; width:45px;'>\ 
                        <option value='1'>1</option>\
                        <option value='2'>2</option>\
                        <option value='3'>3</option>\
                        <option value='4'>4</option>\
                        <option value='5'>5</option>\
                        <option value='6'>6</option>\
                        <option value='7'>7</option>\
                        <option value='8'>8</option>\
             </select>");
});

span[id^='anotherobject_'] will select all the spans whose id begins with anotherobject_ and same goes for span with id that starts with object_