Question

I’m new with JavaScript and jQuery. I clonned below html table with this jQuery script:

$("#table1").clone().appendTo("#div1");

And this is my html table:

<div id="div1">
        <table border="1" id="table1">
        <tr>
            <td colspan="5">Question text will be here</td>
        </tr>
        <tr>
            <td><input type="radio" id="A" name="ans" />answer1 <br /></td>
            <td><input type="radio" id="B" name="ans" />answer2 <br /></td>
            <td><input type="radio" id="C" name="ans" />answer3 <br /></td>
            <td><input type="radio" id="D" name="ans" />answer4 <br /></td>
            <td><input type="radio" id="E" name="ans" />answer5 <br /></td>
        </tr>
        </table>

        <table border="1" id="table1">
        <tr>
            <td colspan="5">Question text will be here</td>
        </tr>
        <tr>
            <td><input type="radio" id="A" name="ans" />answer1 <br /></td>
            <td><input type="radio" id="B" name="ans" />answer2 <br /></td>
            <td><input type="radio" id="C" name="ans" />answer3 <br /></td>
            <td><input type="radio" id="D" name="ans" />answer4 <br /></td>
            <td><input type="radio" id="E" name="ans" />answer5 <br /></td>
        </tr>
        </table>
    </div>

And now, I’m trying to is, changing id of clonned tables and clonned radiobuttons. I need to change clonned tables id properties, otherwise i can’t select them on following steps of my project. And i also need to change name property of all radiobuttons, because i can only select one radiobutton on browser when it’s like this.

I’ve read the documentation about the .attr() api over this page: http://api.jquery.com/attr/ . So I know how to change the attributes of an html element with jQuery, but i don’t know, how to change these attributes of clonned html elements dynamically.

Can you help me with this please?

Answer 1

Something like below should do the trick. jsFiddle

$("#table1")
    .clone()
    .attr('id','table2')
    .appendTo("#div1");

$("#table2 :radio").each (function (index) {
    this.id = this.id + index;
    this.name = this.name + index;
});