I have a problem with a variable input id that needs to be created. The current form has a dynamic input function where a new td with input boxes is created. The input boxes are processes in javascript for further calculations.

Right now, whenever I add a new collumn with input options, cycle time and idle time is calculated in the box of process #1 istead of the new created ones of process #2.

It would be great if zou guys could help me out with that. Here is my current status:

function calculateTakt() {

   var c_demandtStr =document.getElementById('c_demand').value;
   if (!c_demandtStr)
     c_demandtStr = '0';

   var c_workingTimetStr = document.getElementById('c_workingTime').value;
   if (!c_workingTimetStr)
     c_workingTimetStr = '0';

   var demand = parseFloat( c_demandtStr);
   var workingTime = parseFloat(c_workingTimetStr);
   document.getElementById("r_taktTime").value = workingTime / demand;

function calculateCycle() {

   var c_outputtStr = document.getElementById('c_output').value;
   if (!c_outputtStr)
     c_outputtStr = '0';

   var c_processingTimetStr = document.getElementById('c_processingTime').value;
   if (!c_processingTimetStr)
     c_processingTimetStr = '0';

   var c_setupTimetStr = document.getElementById('c_setupTime').value;
   if (!c_setupTimetStr)
     c_setupTimetStr = '0';

   var output = parseFloat(c_outputtStr);
   var processingTime = parseFloat(c_processingTimetStr);
   var setupTime = parseFloat(c_setupTimetStr);
   document.getElementById("r_cycleTime").value = output / (processingTime + setupTime);

   var r_taktTimetStr = document.getElementById('r_taktTime').value;
   var r_cycleTimetStr = document.getElementById('r_cycleTime').value;
   var taktTime = parseFloat(r_taktTimetStr);
   var cycleTime = parseFloat(r_cycleTimetStr);
   document.getElementById("r_idleTime").value = taktTime - cycleTime;

var counter = 1;

var limit = 10;
function addInput(tdName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " process steps.");
     else {
          var newtd = document.createElement('td');
          newtd.innerHTML = "Process #" + (counter + 1) + "<br>Units processed (pce) <input id = 'c_output' type='Text'  name='output' size='4' onkeyup='calculateCycle()'>"
             + " <br>Processing time (min) <input id = 'c_processingTime' type='Text' name='processingTime' size='4' onkeyup='calculateCycle()'>"
             + " <br>setup time (min) <input id = 'c_setupTime' type='Text' name='setupTime' size='4' onkeyup='calculateCycle()'> <br>"
             + " <br>Cycle Time <input id = 'r_cycleTime' type='Text' name='cycleTime' id='cycleTime' size='4'>"
             + " <br>Idle Time <input id = 'r_idleTime' type='Text' name='idleTime' id='idleTime' size='4'>";


<b>Machinery and Process Indicators</b><br>
 <input id = "c_demand" type="Text"  name="demand" size="4" onkeyup="calculateTakt()"> Customer demand (YR)<br>
 <input id = "c_workingTime" type="Text" name="workingTime" size="4" onkeyup="calculateTakt()"> Net working time (YR)<br>
 <input id = "r_taktTime" type="Text" name="taktTime" id="taktTime" size="4"> Takt Time<br><br>

<form method="POST">
  <tr id="dynamicInput">
         Process #1<br>
         Units processed (pce) <input id = "c_output" type="Text"  name="output" size="4" onkeyup="calculateCycle()"> <br>  
         Processing time (min) <input id = "c_processingTime" type="Text" name="processingTime" size="4" onkeyup="calculateCycle()"> <br>
         setup time (min) <input id = "c_setupTime" type="Text" name="setupTime" size="4" onkeyup="calculateCycle()"> <br><br>
         Cycle Time <input id = "r_cycleTime" type="Text" name="cycleTime id="cycleTime" size="4"> <br>
         Idle Time <input id = "r_idleTime" type="Text" name="idleTime id="idleTime" size="4"> <br>
<input type="button" value="Add Step" onClick="addInput('dynamicInput');">