title: how to set unique name and id of HTML Table columns which are dynamically created using ajax
body: <p>I am creating one JSP page in which there is a textfield and button. If user enters some integer value lets say 2 in textfield, then 2 rows will be appended in Html table at last. So the rows of HTML table are being created dynamically.</p>
  
  <p>I am implementing this using ajax call to a page which has <code>&lt;tr&gt;</code> data which is to be added to the main table after last row.</p>
  
  <p>Everything is working fine. Rows are created dynamically using ajax call. But the problem is that all rows added to table have same column name attributes.</p>
  
  <p>Below is my code:</p>
  
  <p>main JSP page:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;style&gt;
  .table {
      font-size: 11px;
  }
  
  #dailyTableDiv {
      height: 70%;
      overflow: scroll;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function addTask(){
      var n=$("#dailytsks").val();
      for(i=1;i&lt;=n;i++){
          $.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
              $('#dailyTable tr:last').after(result);
            }});  
      }
  
  
      //------------------------------
      // i am trying this code to set different names for different select box column.
      //but this is not happenting.
      for(i=1;i&lt;=n;i++){
          $("#chSelect").attr("name","chSelect"+i);
      } 
      //------------------------------
  }
  
  function add1Row(){
      $.ajax({url:"employeeSection/dailyTableRow.jsp",success:function(result){
          $('#dailyTable tr:last').after(result);
        }});  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="well"&gt;
              &lt;input type="text" id="dailytsks" name="dailytsks" /&gt;&lt;input
                  type="button" name="addTsks" value="add" onclick="addTask();" /&gt; &lt;span
                  style="margin-left: 20px;"&gt;&lt;/span&gt;&lt;input type="button" value="+"
                  id="add1" name="add1" onclick="add1Row();" /&gt; &lt;span
                  style="margin-left: 20px;"&gt;&lt;/span&gt;&lt;input type="button" value="-"
                  id="minus" name="minus" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div id="dailyTableDiv"&gt;
              &lt;table id="dailyTable" class="table table-bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Select&lt;/th&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;Client Name&lt;/th&gt;
                          &lt;th&gt;Task-Type&lt;/th&gt;
                          &lt;th&gt;NBPE-Type&lt;/th&gt;
                          &lt;th&gt;Task-Name&lt;/th&gt;
                          &lt;th&gt;Planned-Hrs&lt;/th&gt;
                          &lt;th&gt;Priority&lt;/th&gt;
                          &lt;th&gt;Cross-Team&lt;/th&gt;
                          &lt;th&gt;Current-Status&lt;/th&gt;
                          &lt;th&gt;Is-Completed&lt;/th&gt;
                          &lt;th&gt;Actual-Hrs&lt;/th&gt;
                          &lt;th&gt;SMC-ID&lt;/th&gt;
                          &lt;th&gt;SMC-URL&lt;/th&gt;
                          &lt;th&gt;Comments&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>dailyTableRow.jsp</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;tr&gt;
      &lt;!-- -------------------------------------------------------------------- --&gt;
      &lt;!-- currently I am trying to set unique name for Select column only so i hv given it a ID --&gt;
      &lt;td&gt;&lt;input type="checkbox" id="chSelect" name="chSelect" /&gt;&lt;/td&gt;
      &lt;!-- -------------------------------------------------------------------- --&gt;
      &lt;td width="3"&gt;&lt;input type="text" style="max-width: 80px;"
          name="tskDate" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select name="cliName"&gt;
              &lt;option&gt;select client&lt;/option&gt;
              &lt;option&gt;RWS&lt;/option&gt;
              &lt;option&gt;Orgbase&lt;/option&gt;
              &lt;option&gt;RW-MAAS&lt;/option&gt;
              &lt;option&gt;WSO2&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="chTskType" /&gt;NBPE?&lt;/td&gt;
      &lt;td&gt;&lt;select name="tskNBPEType"&gt;
              &lt;option&gt;select NBPE type&lt;/option&gt;
              &lt;option&gt;meeting&lt;/option&gt;
              &lt;option&gt;on leave&lt;/option&gt;
              &lt;option&gt;mom&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="tskName" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" style="max-width: 15px;" name="plndHrs" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select name="tskPriority"&gt;
              &lt;option&gt;select priority&lt;/option&gt;
              &lt;option&gt;low&lt;/option&gt;
              &lt;option&gt;med&lt;/option&gt;
              &lt;option&gt;high&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" style="max-width: 80px;"
          name="crosTeamMate" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select name="curStatus"&gt;
              &lt;option&gt;select status&lt;/option&gt;
              &lt;option&gt;on hold&lt;/option&gt;
              &lt;option&gt;in progress&lt;/option&gt;
              &lt;option&gt;completed&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="radio" name="isCompleted" value="N"&gt;No &lt;br&gt;
      &lt;input type="radio" name="isCompleted" value="Y"&gt;Yes&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" style="max-width: 15px;" name="actHrs" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" style="max-width: 80px;" name="smcID" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" style="max-width: 160px;" name="smcURL" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;textarea name="comment" rows="3" cols="10"&gt;&lt;/textarea&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  </code></pre>
  
  <p>here all columns have same name which is wrong.
  how can I make unique name attribute pairs for the column in rows which are added. Currently, as seen in the code I am only trying to set unique name attribute values to Select column only. But I am not able to do.  </p>
  
  <p>I want something like:</p>
  
  <p>if name of column is "chSelect" then for two rows, it should become as :</p>
  
  <p>chSelect1   &amp;   chSelect2, respectively.</p>