title: Array radio button on dynamic added row
body: <p>I have a form that allowed user add row dynamically. Inside the form have array radio button.</p>
  
  <p><strong>Question:</strong></p>
  
  <ol>
  <li><p>When I try click on second row's radio button or other raw, the radio button value will show in first column only and other have an offset error.</p>
  
  <p>At the beginning, in my concept is the value will stored according to array column turned out is not.</p></li>
  <li><p>So, I try using JavaScript to set each raw radio button's value but it show this error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property '2' of null</p>
  </blockquote></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addRow(tableID) {
   var table = document.getElementById(tableID);
   var radioB = document.getElementById(BX_related);
   var rowCount = table.rows.length;
         // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i&lt;colCount; i++) {
     
     var newcell = row.insertCell(i);
     newcell.innerHTML = table.rows[1].cells[i].innerHTML; //row[which table u need to duplicate]
     table.rows[rowCount].cells[0].innerHTML = rowCount;
     }
     radioB[rowCount].value = rowCount;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="dataTable" class="form" border="0"&gt;
   &lt;tbody&gt;
    &lt;tr&gt;&lt;th&gt;Bil.&lt;/th&gt;&lt;th&gt;Nama&lt;/th&gt;&lt;th&gt;Umur&lt;/th&gt;&lt;th&gt;Dij./Ting.&lt;/th&gt;&lt;th&gt;Pekerjaan&lt;/th&gt;&lt;th&gt;Catatan&lt;/th&gt;&lt;th&gt;Berkenaan&lt;/th&gt;&lt;/tr&gt;
    &lt;tr &gt;&lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="BX_name[]" size="30"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="BX_age[]"size="2" &gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="BX_study[]"size="8"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="BX_work[]" size="10"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="BX_note[]"size="15"&gt;&lt;/td&gt;
    &lt;td&gt; &lt;input type="radio" name="BX_related[]" id="BX_related" value="" required&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The PHP part:</strong></p>
  
  <pre><code>&lt;?php 
              $i =0;
              if(isset($_POST)=='submit'){
  
                  $BX_name=$_POST['BX_name'];
                  $BX_age=$_POST['BX_age'];
                  $BX_related = $_POST['BX_related'];         
                  echo $BX_related;
                  foreach($BX_name as $a =&gt; $b)
                      {   
                          $i ++;                              
                      echo "&lt;br&gt; $i";
                          echo "name: ";
                          echo $BX_name[$a];
                      }
  
  }
              ?&gt;
  </code></pre>
  
  <p>Anyone have a better solution?</p>