How to reindex/modify name of properties while copy using jquery

Question

I have to copy set of properties if the user clicks on addFilter. Then same set of properties should be displayed up with default criteria.

How to reindex/modify name of properties while copy using jquery? I tried this, but, I am not able to reindex the property name.

Below is the code:

<tr>
   <td id="filters">
      <s:iterator id="filterCondtion" status="status"
              value="filterCondtion">
        <s:select cssClass="drop"
             name="filterCondtion[%{#status.index}].attributeName"
             list="#actPropertyInfo.lstEntities" listKey="code"
             listValue="value">
        </s:select> &nbsp; 

        <s:select cssClass="drop"
             name="filterCondtion[%{#status.index}].filterOption"
             list="#actFilOption.lstEntities" listKey="code" listValue="value">
        </s:select>
                    &nbsp; <s:textfield
                    name="filterCondtion[%{#status.index}].attributeValue" 
                    cssClass="textbx" />&nbsp;

     </s:iterator>
     <div id="filteredTable"></div>
   </td>
   <td>&nbsp; <a href="#" id="addFltr"><strong>
              <s:text name="common.addFilter" />
          </strong></a>
          <s:submit cssClass="btn" name="button.find" key="button.find" />
          <input type="reset" value="<s:text name="button.reset"/>" class=btn />
   </td>
</tr>


<script type="text/javascript"><!--
$(document).ready(function(){
  $('#addFltr').click(function(){
 $('#filteredTable').prepend($('#filters').clone().attr("id","remove"));  
    });
});
--></script>

Answer 1

You can do it using .removeAttr() like this:

$(function(){
  $('#addFltr').click(function(){
    $('#filteredTable').prepend($('#filters').clone().removeAttr("id"));  
  });
});

.attr("id", "remove") sets the ID to id="removed", if you want to remove it completely, use the .removeAttr() function, it'll take it off the elements so you're all set and no duplicate IDs.