I have <div> tag that is dynamically filled with check boxes and some text based on what the user picks from the page. For example, there is information in a tabular format and next to each is a check box. There can an unspecified number of them. User click the check box and my <div> tag gets populated with a checkbox (which is now checked) and text. The checkbox ID and text are identical to the checkbox that the user picked.
I need to be able to keep track of these checkboxes in the <div> tag because if the user unchecks any of the boxes they will be removed from the <div> and in addition the original checkbox on the page will get unchecked as well.
Here is my code, the problem is that it only works for the checkbox id I have hardcoded the value (849).
I realize I need to probably loop through some collection that contains these boxes, but I'm lost at this point. Any help with whis would be greatly appreciated.
<input type='checkbox' onclick="fillCart();" name='advertiser_id' id='849' value='849'>
function fillCart() {
var ni = document.getElementById('floatlayer');
var numi = document.getElementById('849');
var num = (document.getElementById('849').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=\'checkbox\' onclick=\'removeElement('+divIdName+') checked \> '+num;
ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('floatlayer');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
if(document.getElementById(divNum-1).checked == true){
document.getElementById(divNum-1).checked = false
}
}