How can i increment input control dynamically...???js

Question

I have used for loop to copy my table to n times.Bt a "copy()" code works only on 1st table.I dnt knw why.Kindly help me to solve this.Here is my js fiddle......(refer my fiddle for complete code)

https://jsfiddle.net/3shjhu98/3/

The code that not wrks is what i mentioned below.

 function copy() {
      var text1 = document.getElementById("Name1").value;
      document.getElementById("Name2").value = text1;
      var text2 = document.getElementById("Name3").value;
      document.getElementById("Name4").value = text2;
    }

    <td rowspan="3" style="height:100px;">Name <input type="text" name="Emp name" placeholder="enter your name" id="Name1" /><br> ID <input type="id" name="Emp Id" placeholder="enter id" id="Name3"> </td>

    <tr id="p001">
      <td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy();" /><label for="text"> Name : <input type="text" id="Name2"></label>
        <label for="text"> ID   : <input type="id" id="Name4"></label> </td>
    </tr>

I dont get you. Could you please rewrite your problem description? — Jonas Wilms, Jun 22 '17 at 09:33
If you need dynamic input fields, maybe you can use them as array: https://stackoverflow.com/questions/1010941/html-input-arrays — Mic, Jun 22 '17 at 09:34
i have updated my description.please go through my jsfiddle buddy. — Bala_Poyyamoli, Jun 22 '17 at 09:43

score 0 · Answer 1 · answered Jun 22 '17 at 09:52

Hey i dont know if this is what you want.

var num,i,y;
function cloneRow() {
num=document.getElementById("copying number").value;


for(i=0;i<num-1;i++)
{
  var row = document.getElementById("rowToClone");
  var table = document.getElementById("tableToModify");
  var clone = row.cloneNode(true);
  clone.id = "newID";
  table.appendChild(clone);

}     
      function createRow() {
      var row = document.createElement('tr');
      var col = document.createElement('td');
      var col2 = document.createElement('td');
      row.appendChild(col);     
      row.appendChild(col2);
      var table = document.getElementById("tableToModify");
      table.appendChild(row);
      } 
      
    }  
   
   
    function copy(selector) {
      var text1 = document.getElementById(selector + "1").value;
      document.getElementById(selector + "2").value = text1;
      var text2 = document.getElementById(selector + "3").value;
      document.getElementById(selector + "4").value = text2;
      }

table {
    border-collapse: collapse      
}

td {
   border: 1px solid black;height:100%;
}
p001{
border:none;}

table{counter-reset:section;}
.count:before
{
counter-increment:section;
content:counter(section);
}

<!Doctype HTML>

<body>
  <form>
  <h4>Enter the number of times to be copied</h4>
  <input type="text" id="copying number" placeholder="Enter Here">
   <input type="reset" value="clear">
   </form>
  <br>
<br>
  <input type="submit" value="Copy row" onclick="cloneRow()">
 
  <br><br>
 
 
<table width="100%" id="tableToModify" >
<tbody id="rowToClone">


<tr >
<td  colspan="5" style="border:2px solid black;height:50px;text-align:center;">header 
</tr>

 <tr>
  <td style="height:25px;width:11%;text-align:center;" class="count" >Name</td>
 
  <td colspan="3"style="width:11%;height:100px;text-align:center;">Age</td>
  <td style="width:11%;text-align:center;">Gender</td>
 
 </tr>
 
 <tr>
 
 
 
  <td rowspan="3" style="height:100px;"><pre>Name  <input type="text" name="Emp name"  placeholder="enter your name"  id="Name1"/><br>
ID    <input type="id" name="Emp Id" placeholder="enter id" id="Name3" > </pre></td>




 
    <td></td>
  <td></td>
  <td ></td>
 
 
  <td  rowspan="3"> <pre>
  <input type="radio" name="Gender" value="male">MALE</input>
  <input type="radio" name="Gender" value="female">FEMALE</input> <br>  <input type="radio" name="Gender" value="other">OTHER</input>
  </pre></td>
 
 
 </tr>

 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tr id="p01">
  <td></td>
  <td colspan="4"style="height:100px"></td>
 
 
 </tr>
 <tr><td colspan="5" style="height:50px;text-align:center;">
footer</td>
 
</tr>

<tr id="p001">
<td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy('Name');"/><pre><label for="text"> Name : <input type="text" id="Name2"></label>
<label for="text"> ID   : <input type="id" id="Name4"></label> </pre></td></tr>


</tbody>

</table>
</body>
</head>
</html>

my problem is function "copy()" runs only in 1st table only and not working in subsequent copied tables.Here(ur answer) also the same prob continues — Bala_Poyyamoli, Jun 22 '17 at 09:57
`var text1 = document.getElementById(selector + "1").value; document.getElementById(selector + "2").value = text1;` — Jan Ciołek, Jun 22 '17 at 10:07
`var text1 = document.getElementById(selector + "1").value; document.getElementById(selector + "2").value = text1;`Each time this codes evaluates it replaces values in the template row.If you use `getElementById `method it retruns first element from the DOM.You shouldnt have multiply DOM elements with same ID!Imagine people with same ID number!Why the hell commenting is sucha a pain in stackoverflow? — Jan Ciołek, Jun 22 '17 at 10:13

How can i increment input control dynamically...???js

1 Answers1