title: Converting if...else statement into for-loop
body: <p>I have one generous piece of code with several if...else statements and I would need to convert this into a loop. The problem is, each time it makes a loop, there must be some different id to the function so it works properly.</p>
  
  <p>Let's take a look at the code:</p>
  
  <pre><code>// Count how many inputs there are in element with id "tempResult"
  var inputCount = document.getElementById('tempResult').getElementsByTagName('input').length;
  
  
  if (inputCount == 1)  // if there is 1 input, generate 1 line
  {
    var str = document.getElementById('tempString1').value;
    var arrayOfStrings1 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings1.length; i++)
    {
      var div1 = document.getElementById('div1');
      var mi1 = document.createElement('input');
      mi1.setAttribute('type', 'text');
      mi1.setAttribute('size', '5');
      mi1.setAttribute('id', 'string1' + (i+1));
      mi1.setAttribute('value', arrayOfStrings1[i]);
      div1.appendChild(mi1);
    }
  }
  else if (inputCount == 2) // if there are 2 inputs, generate 2 lines
  {
    var str = document.getElementById('tempString1').value;
    var arrayOfStrings1 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings1.length; i++)
    {
      var div1 = document.getElementById('div1');
      var mi1 = document.createElement('input');
      mi1.setAttribute('type', 'text');
      mi1.setAttribute('size', '5');
      mi1.setAttribute('id', 'string1' + (i+1));
      mi1.setAttribute('value', arrayOfStrings1[i]);
      div1.appendChild(mi1);
    }
  
  
    var str = document.getElementById('tempString2').value;
    var arrayOfStrings2 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings2.length; i++)
    {
      var div2 = document.getElementById('div2');
      var mi2 = document.createElement('input');
      mi2.setAttribute('type', 'text');
      mi2.setAttribute('size', '5');
      mi2.setAttribute('id', 'string2' + (i+1));
      mi2.setAttribute('value', arrayOfStrings2[i]);
      div2.appendChild(mi2);
    }
  }
  else if (inputCount == 3) // if there are 3 inputs, generate 3 lines
  {
    var str = document.getElementById('tempString1').value;
    var arrayOfStrings1 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings1.length; i++)
    {
      var div1 = document.getElementById('div1');
      var mi1 = document.createElement('input');
      mi1.setAttribute('type', 'text');
      mi1.setAttribute('size', '5');
      mi1.setAttribute('id', 'string1' + (i+1));
      mi1.setAttribute('value', arrayOfStrings1[i]);
      div1.appendChild(mi1);
    }
  
  
    var str = document.getElementById('tempString2').value;
    var arrayOfStrings2 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings2.length; i++)
    {
      var div2 = document.getElementById('div2');
      var mi2 = document.createElement('input');
      mi2.setAttribute('type', 'text');
      mi2.setAttribute('size', '5');
      mi2.setAttribute('id', 'string2' + (i+1));
      mi2.setAttribute('value', arrayOfStrings2[i]);
      div2.appendChild(mi2);
    }
  
  
    var str = document.getElementById('tempString3').value;
    var arrayOfStrings3 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings3.length; i++)
    {
      var div3 = document.getElementById('div3');
      var mi3 = document.createElement('input');
      mi3.setAttribute('type', 'text');
      mi3.setAttribute('size', '5');
      mi3.setAttribute('id', 'string3' + (i+1));
      mi3.setAttribute('value', arrayOfStrings3[i]);
      div3.appendChild(mi3);
    }
  }
  else if (inputCount == 4) // if there are 4 inputs, generate 4 lines
  {
    var str = document.getElementById('tempString1').value;
    var arrayOfStrings1 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings1.length; i++)
    {
      var div1 = document.getElementById('div1');
      var mi1 = document.createElement('input');
      mi1.setAttribute('type', 'text');
      mi1.setAttribute('size', '5');
      mi1.setAttribute('id', 'string1' + (i+1));
      mi1.setAttribute('value', arrayOfStrings1[i]);
      div1.appendChild(mi1);
    }
  
  
    var str = document.getElementById('tempString2').value;
    var arrayOfStrings2 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings2.length; i++)
    {
      var div2 = document.getElementById('div2');
      var mi2 = document.createElement('input');
      mi2.setAttribute('type', 'text');
      mi2.setAttribute('size', '5');
      mi2.setAttribute('id', 'string2' + (i+1));
      mi2.setAttribute('value', arrayOfStrings2[i]);
      div2.appendChild(mi2);
    }
  
  
    var str = document.getElementById('tempString3').value;
    var arrayOfStrings3 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings3.length; i++)
    {
      var div3 = document.getElementById('div3');
      var mi3 = document.createElement('input');
      mi3.setAttribute('type', 'text');
      mi3.setAttribute('size', '5');
      mi3.setAttribute('id', 'string3' + (i+1));
      mi3.setAttribute('value', arrayOfStrings3[i]);
      div3.appendChild(mi3);
    }
  
  
    var str = document.getElementById('tempString4').value;
    var arrayOfStrings4 = str.split('*');
    for(var i = 0; i &lt; arrayOfStrings4.length; i++)
    {
      var div4 = document.getElementById('div4');
      var mi4 = document.createElement('input');
      mi4.setAttribute('type', 'text');
      mi4.setAttribute('size', '5');
      mi4.setAttribute('id', 'string4' + (i+1));
      mi4.setAttribute('value', arrayOfStrings4[i]);
      div4.appendChild(mi4);
    }
  }
  </code></pre>
  
  <p>As you can see, we repeat a certain amount of time the same function depending on how much inputs we have in the div <code>tempResult</code>:</p>
  
  <pre><code>var str = document.getElementById('tempStringX').value;
    var arrayOfStringsX = str.split('*');
    for(var i = 0; i &lt; arrayOfStringsX.length; i++)
    {
      var divX = document.getElementById('divX');
      var miX = document.createElement('input');
      miX.setAttribute('type', 'text');
      miX.setAttribute('size', '5');
      miX.setAttribute('id', 'stringX' + (i+1));
      miX.setAttribute('value', arrayOfStringsX[i]);
      divX.appendChild(miX);
    }
  </code></pre>
  
  <p>The <code>X</code>, replaced by numbers each time, are important, the function will not properly work without it (except for the <code>divX</code>, I could generate the inputs inside the same div, but whatever). The above code is working perfectly.</p>
  
  <p>What I'm trying to do, is to use a <code>for()</code> instead of <code>if...else()</code>, so that I don't need to manually edit the code each time we add a new div. I'm not very familiar with <code>for()</code> and my tries with the already existing ones in my code as models were not successful.</p>
  
  <p>Here's how the HTML looks like:</p>
  
  <pre><code>&lt;div id="tempResult"&gt;
      &lt;input type="text" id="tempString1" value="valueTempString1" /&gt;
      &lt;input type="text" id="tempString2" value="valueTempString2" /&gt;
      &lt;input type="text" id="tempString3" value="valueTempString3" /&gt;
      &lt;input type="text" id="tempString4" value="valueTempString4" /&gt;
  &lt;/div&gt;
  &lt;div id="div1"&gt;&lt;/div&gt;
  &lt;div id="div2"&gt;&lt;/div&gt;
  &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;div id="div4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And if you wonder what this whole code is doing, <a href="https://stackoverflow.com/questions/26081187/javascript-cut-string-and-return-in-different-inputs">explanation's here</a>. Thanks :)</p>