title: getElementById( ) not working on Dynamically assigned id
body: <p>I have gone through google and some of SO questions (such as <a href="https://stackoverflow.com/questions/15038772/document-getelementbyid-by-assigning-the-dynamic-variable">this</a> &amp; <a href="https://stackoverflow.com/questions/20704718/dynamically-added-text-id-getelementbyid">this</a>) as well but I didn't find the solution.
  I am working for validation of a dynamically generated rows in a table,initially I am trying to validate the first td, loop and alert is working all fine but document.getElementById() is giving a null value. The script is at the very bottom of the page.</p>
  
  <p>and here is the JS code.</p>
  
  <p>edit: I have added the code, and what I am trying to do is display the error (Please fill) when field is left blank on the click of submit button and hide it when it is filled.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $(document).on("click",".addRowAux",function(){
      /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val();
   var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val();
   var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val();
   var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/
   
   var countrow= $("#annextable tr").length;
   
    /*countrow++;*/
    if(countrow&lt;11)
    {
    $("#aux").append('&lt;tr&gt;&lt;td align="center"&gt;'+countrow+'&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_name[]" id="ref_name"/&gt;&lt;span id="refNm_error"&gt;Please fill&lt;/span&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_desg[]" id="ref_desg"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_address[]" id="ref_address"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_email[]" id="ref_email"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_mobile[]" id="ref_mobile"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;input type="text" name="ref_pan[]" id="ref_pan"/&gt;&lt;/td&gt;&lt;td align="center"&gt;&lt;span class="addRowAux"&gt;Add&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;span id="removeRowaux"&gt;Remove&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;');
    }
    else
    {
      //countrow--;
      alert("Can not add more then 10 record.");
    }
  });
    
  });
     $(document).on('click', '#removeRowaux', function () { // &lt;-- changes 
      var countrow= $("#annextable tr").length;
   if(countrow&gt;3)
   {
        $(this).closest('tr').remove();        
          var tblObj = document.getElementById('annextable'); 
          var no_of_rows = tblObj.rows.length; 
          for(var i=0; i&lt;no_of_rows-1; i++) 
          {
          tblObj.rows[i+1].cells[0].innerHTML = i+1;
          tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1);
          
          ////alert(kj);
          //document.getElementById("refNm_error").id ="refNm_error"+j;
          }
   }
   else{
    alert("you can not delete this")
    }
   });
  $(document).on('click', '#hods', function () {        
      var tblObj = document.getElementById('annextable'); 
          var no_of_rows = tblObj.rows.length; 
          for(var i=0; i&lt;no_of_rows-1; i++) 
          {tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1)
          
          var j=tblObj.rows[i+1].cells[1].getAttribute("delThis");
          document.getElementById("refNm_error").id ="refNm_error"+j;
          }
         
     
  });
    
  $(function(){
    $(document).on('change', '.rel_type', function() {
     var relation = $(this).val();
     if(relation =='OT'){
      $(this).next("input").show();
      $(this).next("input").val("Please Specify");
      }
    else{
     $(this).next("input").hide();
     $(this).next("input").val("")
    }
    });   
  });
  
  
  
  
  function yoVal(){
  var refNm =document.getElementsByName('ref_name[]');   
  
  for(var i=0;i&lt;=refNm.length;i++) {
      if(refNm[i].value==""){
      alert("success");
  }
      else{        
         var ch ='refNm_error'+(i+1);
         alert(ch);  
      //document.getElementById(ch).style.display = "none";
          alert("fail")
      }
      
  }}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="refForm"&gt;
                      &lt;table width="99%" border="1"  id="annextable" style="border-collapse:collapse" align="center"&gt;
                  &lt;thead&gt;
                    &lt;tr style="background:#ddd;"&gt;
                      &lt;th&gt;S.No&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Designation&lt;/th&gt;
                      &lt;th&gt;Address&lt;/th&gt;                   
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;Mobile&lt;/th&gt;
                      &lt;th&gt;PAN&lt;/th&gt;
       &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                   &lt;tbody id="aux"&gt;
        &lt;tr&gt;
                      &lt;td align="center"&gt;1&lt;/td&gt;
                      &lt;td align="center"&gt;&lt;input type="text" name="ref_name[]" id="ref_name"/&gt;&lt;br/&gt;&lt;span id="refNm_error"&gt;Please fill&lt;/span&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;&lt;input type="text" name="ref_desg[]" id="ref_desg"/&gt;&lt;/td&gt;
          &lt;td align="center"&gt;&lt;input type="text" name="ref_address[]" id="ref_address"/&gt;&lt;/td&gt;
       &lt;td align="center"&gt;&lt;input type="text" name="ref_email[]" id="ref_email"/&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;&lt;input type="text" name="ref_mobile[]" id="ref_mobile"/&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;&lt;input type="text" name="ref_pan[]" id="ref_pan"/&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;
       &lt;span class="addRowAux"&gt;Add&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;span id="removeRowaux"&gt;Remove&lt;/span&gt;&lt;/td&gt;
                    &lt;/tr&gt;  
                    
                  &lt;/tbody&gt;&lt;/table&gt;
                          &lt;input type="button" onclick="yoVal()" value="Test" id="hods"/&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>