Hi,

I am pretty new to JS and use the below code to clone a table row and add it as a new row which works fine.
Each row consists of the below cells (input fields and selects) + a button.

Can someone help me and tell me how I can create unique IDs for all the newly added items here ? I was thinking of using the row index for this but am not able to get it working.

My JS:
Code:
<script type="text/javascript">
 function cloneRow()
 {
  var rowCount = parseInt(document.getElementById('rowID').value, 10);
 
  var table = document.getElementById("outputTable3");
  var row = document.getElementById("rowOrig");
  var clone = row.cloneNode(true);
  
  table.appendChild(clone);
  
  rowCount = isNaN(rowCount) ? 0 : rowCount;
  rowCount++;
  document.getElementById('rowID').value = rowCount;
 }
</script>
[b]The HTML for the original row: [/'b]
Code:
                    <tbody>
                        <tr>
                            <td><input type="text" style="width:97%" name="url[]" onBlur="lowercaseAll(this)" /></td>
                            <td><input type="text" style="width:97%" name="email[]" onBlur="lowercaseAll(this)" /></td>
                            <td><select style="width:104%" name="policy[]">
                                    <option value="">- please select -</option>
                                    <?php foreach($objPoliciesCat->policyCategory as $policiesCat){ ?> 
                                    <option value="<?php echo $policiesCat; ?>" <?php if($policiesCat=="Z"){ echo "selected"; } ?>><?php echo $policiesCat; ?></option>
                                    <?php } ?> 
                                </select></td>
                            <td><select style="width:104%" name="source[]">
                                    <option value="">- please select -</option>
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="C" selected>C</option>
                                </select></td>
                            <td colspan="2"><input type="text" style="width:97%" name="notes[]" /></td>
                            <td class="txtcntr"><button type="button" value="" name="del[]" title="delete row" class="btn" onClick="if(parseInt(document.getElementById('rowID').value, 10)==1){lastRow()}else{$(this).closest('tr').remove(); delRow()}"><i class="icon-red icon-remove"></i></button></td>
                        </tr>
                    </tbody>
Thanks a lot in advance,
Mike