title: Iteration is not respecting the sequence - not sure what is wrong with my script - Javascript
body: <p>I have a form at work where it can be done only 1 by 1 and I'm trying to automate it using Javascript (can't use excel because security doesn't allow linking any external JS scripts for working with excel) so I decided to save data in .txt file and browse for it and save as an array and then iterate within the array, but the problem I'm facing is that I'm the iterator is filling the fields with the last elements of the array.
  I thought the issue might be because of timing so I tried to use setTimeout but didn't help as well.</p>
  <p>Example:</p>
  <pre><code>var alphabet = ['a','b','c','d','e','f'];
  var alphabetPairs = splitArrayIntoChunksOfLen(alphabet,3); //split into chunks of 3
  console.log(alphabetPairs);
  
  for(let i=0; i&lt;alphabetPairs.length; i++)
   for(let j=0; j&lt;alphabetPairs[i].length; j++)
      console.log(alphabetPairs[i][j])
  </code></pre>
  <p>Now with the above for loops if I use it to fill the elements of the form, they filled with a,b,c and then replaced by d,e,f which I don't want, I want the loop to finish first working with a,b,c then click a submit button and then move to d,e,f</p>
  <p>the HTML code of the form is:</p>
  <pre><code>&lt;form class=&quot;x-panel-body x-panel-body-noheader x-panel-body-noborder x-form&quot; method=&quot;POST&quot; id=&quot;ext-gen34&quot;
      style=&quot;overflow: auto; width: auto; height: auto;&quot;&gt;
      &lt;div id=&quot;ext-comp-1007&quot; class=&quot; aws-tool-errorbox&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;x-form-item &quot; tabindex=&quot;-1&quot; id=&quot;ext-gen94&quot;&gt;&lt;label for=&quot;c_and_r_account_id&quot; style=&quot;width:120px;&quot;
              class=&quot;x-form-item-label&quot; id=&quot;ext-gen95&quot;&gt;Account ID:&lt;/label&gt;
          &lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-c_and_r_account_id&quot; style=&quot;padding-left:125px&quot;&gt;&lt;input type=&quot;text&quot;
                  size=&quot;20&quot; autocomplete=&quot;off&quot; id=&quot;c_and_r_account_id&quot; name=&quot;c_and_r_account_id&quot;
                  class=&quot; x-form-text x-form-field x-form-empty-field&quot; style=&quot;width: 242px;&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;x-form-item &quot; tabindex=&quot;-1&quot; id=&quot;ext-gen96&quot;&gt;&lt;label for=&quot;credit_and_rebill_bill_id&quot; style=&quot;width:120px;&quot;
              class=&quot;x-form-item-label&quot; id=&quot;ext-gen97&quot;&gt;Invoice ID:&lt;img
                  src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot;
                  class=&quot;aws-ux-helpicon&quot; id=&quot;ext-gen99&quot;&gt;&lt;/label&gt;
          &lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-credit_and_rebill_bill_id&quot; style=&quot;padding-left:125px&quot;&gt;&lt;input
                  type=&quot;text&quot; size=&quot;20&quot; autocomplete=&quot;off&quot; id=&quot;credit_and_rebill_bill_id&quot; name=&quot;credit_and_rebill_bill_id&quot;
                  class=&quot; x-form-text x-form-field x-form-empty-field x-form-invalid&quot; style=&quot;width: 242px;&quot;&gt;
              &lt;div class=&quot;x-form-invalid-icon&quot; id=&quot;ext-gen98&quot; style=&quot;left: 377px; top: 0px; visibility: visible;&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;x-form-item &quot; tabindex=&quot;-1&quot; id=&quot;ext-gen100&quot;&gt;&lt;label for=&quot;credit_and_rebill_reference_id&quot;
              style=&quot;width:120px;&quot; class=&quot;x-form-item-label&quot; id=&quot;ext-gen101&quot;&gt;Reference ID:&lt;img
                  src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot;
                  class=&quot;aws-ux-helpicon&quot; id=&quot;ext-gen102&quot;&gt;&lt;/label&gt;
          &lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-credit_and_rebill_reference_id&quot; style=&quot;padding-left:125px&quot;&gt;&lt;input
                  type=&quot;text&quot; size=&quot;20&quot; autocomplete=&quot;off&quot; id=&quot;credit_and_rebill_reference_id&quot;
                  name=&quot;credit_and_rebill_reference_id&quot; class=&quot; x-form-text x-form-field x-form-empty-field&quot;
                  style=&quot;width: 242px;&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;x-form-item &quot; tabindex=&quot;-1&quot; id=&quot;ext-gen103&quot;&gt;&lt;label for=&quot;credit_rebill_reason_code&quot; style=&quot;width:120px;&quot;
              class=&quot;x-form-item-label&quot; id=&quot;ext-gen104&quot;&gt;Reason Code for Credit and Rebill:&lt;img
                  src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot;
                  class=&quot;aws-ux-helpicon&quot; id=&quot;ext-gen107&quot;&gt;&lt;/label&gt;
          &lt;div class=&quot;x-form-element&quot; id=&quot;x-form-el-credit_rebill_reason_code&quot; style=&quot;padding-left:125px&quot;&gt;
              &lt;div class=&quot;x-form-field-wrap x-form-field-trigger-wrap&quot; id=&quot;ext-gen105&quot; style=&quot;width: 250px;&quot;&gt;&lt;input
                      type=&quot;text&quot; size=&quot;24&quot; autocomplete=&quot;off&quot; id=&quot;credit_rebill_reason_code&quot;
                      name=&quot;credit_rebill_reason_code&quot;
                      class=&quot; x-form-text x-form-field x-form-empty-field x-trigger-noedit&quot; style=&quot;width: 225px;&quot;
                      readonly=&quot;&quot;&gt;&lt;img
                      src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; alt=&quot;&quot;
                      class=&quot;x-form-trigger x-form-arrow-trigger&quot; id=&quot;ext-gen106&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;x-form-clear-left&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>And my script is:</p>
  <pre><code>var lines = [];
  var x = 0,
    y = 0;
  var accID = &quot;&quot;,
    invID = &quot;&quot;,
    refID = &quot;&quot;,
    reasonCOde = &quot;&quot;;
  var errArray = [];
  var errString = &quot;&quot;;
  
  // Creating a button to browse for the txt file
  var zNode = document.createElement('div');
  zNode.innerHTML = '&lt;input type=&quot;file&quot; name= &quot;input file&quot; id=&quot;input&quot;&gt;';
  zNode.setAttribute('id', 'myContainer');
  document.getElementById(&quot;header&quot;).appendChild(zNode);
  
  // adding a function to the button to read the text
  let myArray = [];
  // a function to split each line into an array of its own
  function splitArrayIntoChunksOfLen(arr, len) {
    var chunks = [],
      i = 0,
      n = arr.length;
    while (i &lt; n) {
      chunks.push(arr.slice(i, i += len));
    }
    return chunks;
  }
  
  var fileRD = document.getElementById('input');
  // adding eventlistener
  fileRD.addEventListener('change', () =&gt; {
    let fr = new FileReader();
    // reading the file
    fr.readAsText(fileRD.files[0]);
    // looping through each line array and filling data into webops
    fr.onload = function() {
      myArray = fr.result.split(/[\t,\r,\n,\,]+/);
      lines = splitArrayIntoChunksOfLen(myArray, 4);
      //text.innerHTML = lines;
      console.log(lines);
  
  // Creating the functions for the steps
  
      // clicking on Credit and Rebill option
      var open = function() {
        var cr = document.getElementsByClassName(&quot;x-tree-node-indent&quot;);
        cr[8].click();
      };
  
      // a function to fill each element of the credit and rebill
      function fill(ele, val) {
        if (document.getElementById(ele) &amp;&amp; val != &quot;&quot;) {
          document.getElementById(ele).value = val;
        }
      }
  
      // clicking on tools to click again on credit and rebill
      var tools = function() {
        var tool = document.getElementsByClassName(&quot;x-tree-node-anchor&quot;);
        tool[0].click();
      };
  
      // close credit and rebill
      var close = function() {
        var closeBtn = document.getElementsByClassName(&quot;x-tab-strip-close&quot;);
        closeBtn[0].click();
      };
  
      // clicking on tools to click again on credit and rebill
      var tools = function() {
        var tool = document.getElementsByClassName(&quot;x-tree-node-anchor&quot;);
        tool[0].click();
      };
  
      
  
      // iteration to fill the data and submit
      for (x = 0; x &lt; lines.length;) {
        for (y = 0; y &lt; lines[x].length;) {
          console.log(lines[x][0]);
          accID = lines[x][0];
          invID = lines[x][1];
          refID = lines[x][2];
          reasonCOde = lines[x][3];
          y++;
        }
        open();
              setTimeout(function() {fill(&quot;c_and_r_account_id&quot;, accID);},2000);
        //fill(&quot;c_and_r_account_id&quot;, accID);
              setTimeout(function(){fill(&quot;credit_and_rebill_bill_id&quot;, invID);},2000);
        //fill(&quot;credit_and_rebill_bill_id&quot;, invID);
        setTimeout(function(){fill(&quot;credit_and_rebill_reference_id&quot;, refID);},2000);
        //fill(&quot;credit_and_rebill_reference_id&quot;, refID);
        setTimeout(function(){fill(&quot;credit_rebill_reason_code&quot;, reasonCOde);},2000);
        //fill(&quot;credit_rebill_reason_code&quot;, reasonCOde);
        //setTimeout(function() {ok();}, 1500);
        setTimeout(function() {close();}, 3000);
        setTimeout(function() {tools();}, 3000);
        console.log(x);
        x++;
      }
  
    }
  })
  </code></pre>
  <p>the .txt file that is being read has details like this:</p>
  <pre><code>111111111111    111111111   1111111111  11111111111111111111111111111
  222222222222    222222222   2222222222  22222222222222222222222222222
  </code></pre>