title: Add JQuery functionality to dynamically created radio buttons
body: <p>I'm currently trying to add a jQuery function to a row of radio buttons. The problem is that I need to add dynamically many rows. Now For this example I only added 2 elements into the array of newNodes, but in my application newNodes can potentially have many different sizes.</p>
  
  <p>So basically I want to add the Query function something like this:</p>
  
  <pre><code>$('#rowID input').on('change', function() {
      alert($('input[name=i]:checked', '#rowID').val()); 
  });
  </code></pre>
  
  <p>Where it exists inside the forloop and is added for each new row. "rowID" is a variable assigned to the unique row identifier and then use the loop iterator "i" as a way to distinguish the radio buttons for each row.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;form id="createEdges" method="POST&gt;
      &lt;fieldset&gt;
          &lt;legend class="title"&gt;Modify the graph!&lt;/legend&gt;
          &lt;table id="createEdgesTable"&gt;
          &lt;/table&gt;    
          &lt;input type="button" class="btn btn-default" id="backToThirdForm" onclick="goBackToForm3()" value="Back"/&gt;
      &lt;/fieldset&gt;
  </code></pre>
  
  <p>And Here is the Javascript:</p>
  
  <pre><code>newNodes = [];
  newNodes.push(0);
  newNodes.push(1);
  
  //get HTML Table to add rows in
  var edgeTable = document.getElementById("createEdgesTable");
  //Create a table row for each node
      for (var i in newNodes) {
          var row = edgeTable.insertRow();
          row.id = "node" + i;
  
          //Show name of the node
          var td = document.createElement('td');
          var text = document.createTextNode(newNodes[i]);
          td.appendChild(text);
          row.appendChild(td);
  
          //Choice for showing node
          var td2 = document.createElement('td');
          var radioButton1 = document.createElement('input');
          radioButton1.type = "radio";
          radioButton1.name = i;
          radioButton1.value = "showNode";
          td2.appendChild(radioButton1);
          row.appendChild(td2);
  
          //Choice for creating edge 
          var td3 = document.createElement('td');
          var radioButton2 = document.createElement('input');
          radioButton2.type = "radio";
          radioButton2.name = i;
          radioButton2.value = "createEdge";
          td3.appendChild(radioButton2);
          row.appendChild(td3);
  
          //Choice for deleting node 
          var td4 = document.createElement('td');
          var radioButton3 = document.createElement('input');
          radioButton3.type = "radio";
          radioButton3.name = i;
          radioButton3.value = "removeNode";
          td4.appendChild(radioButton3);
          row.appendChild(td4);   
  
          var rowID = row.id;
  
  
      }
  
  $('#node0 input').on('change', function() {
      alert($('input[name=0]:checked', '#node0').val()); 
  });
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/nxexrq9y/" rel="nofollow">https://jsfiddle.net/nxexrq9y/</a></p>
  
  <p>Any example on how to make this work for each row? I'm relatively new to JQuery and have been stuck on this problem for quite some time now. Thank you for your time and help!</p>