html - jQuery : Dynamic table - row index -

i have code dynamically add html table columns. , these new columns have 3 radios. , want select single radio out of these 3 in each rows.

i trying find out table row index can add radio id. getting value undefined .

https://jsfiddle.net/jjayaraman/evo6kx0k/

problem : 'coz of radio has same id , can select 1 of radios... not 1 each row..

here code

$(document)    .ready(      function() {        $("#addbtn")          .click(            function() {              $("#mytable thead tr")                .append(                  '<th colspan="3">new header</th>')              $('#mytable tbody tr')                .append(                  '<td><input type="radio" name="interactivity' + $('#mytable tr').rowindex + ' value="y"></td><td><input type="radio" name="interactivity' + $('#mytable tr').rowindex + ' value="n"></td><td><input type="radio" name="interactivity' + $('#mytable tr').rowindex + ' value="na">')            });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <form>      <table border="1" id="mytable">      <thead>        <tr>          <th>heading1</th>          <th>heading2</th>        </tr>      </thead>      <tbody>        <tr>          <td>r1 column1</td>          <td>r1 column2</td>        </tr>        <tr>          <td>r2 column1</td>          <td>r2 column2</td>        </tr>        <tr>          <td>r3 column1</td>          <td>r3 column2</td>        </tr>        </tbody>    </table>      <br>    <input id="addbtn" type="button" value="add column">    </form>

you have manually append content each row since append function doesn't reevaluate expression each item. each does...

$(document)    .ready(      function() {        $("#addbtn")          .click(            function() {              $("#mytable thead tr")                .append(                  '<th colspan="3">new header</th>')              $('#mytable tbody tr')                .each(function(i) {                  $(this).append(                    '<td><input type="radio" name="interactivity' + + ' value="y"></td><td><input type="radio" name="interactivity' + + ' value="n"></td><td><input type="radio" name="interactivity' + + ' value="na">')                })            });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <form>      <table border="1" id="mytable">      <thead>        <tr>          <th>heading1</th>          <th>heading2</th>        </tr>      </thead>      <tbody>        <tr>          <td>r1 column1</td>          <td>r1 column2</td>        </tr>        <tr>          <td>r2 column1</td>          <td>r2 column2</td>        </tr>        <tr>          <td>r3 column1</td>          <td>r3 column2</td>        </tr>        </tbody>    </table>      <br>    <input id="addbtn" type="button" value="add column">    </form>