Split Textarea value to All Text Box & Query using string value

I made some function for split textarea value to all textarea and query using text string. I am able to success. But Some Problem. Below Example.

  1. Type to Filed1 string like:
    GFSD
    65897542
  2. Then Click Split Button. Output: part all value to reaming text area.
  3. Put GF value to Input Character Filed. Output: 6589
  4. My Question is When i put value like GF then output 6589 . And when put FG then also same output 6589 instead of 8965 . If any solution Pls help me out. I wish to the Character strictly follow number.
<html>
   <head>
      <title>Test Demo</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <label>Filed1 </label>
      <textarea id="value1"></textarea>
     
      <label>Filed2:</label>
      <textarea id="value2"></textarea>
      
      <label>Filed3:</label>
      <textarea id="value3"></textarea>
      
      <label>Filed4:</label>
      <textarea id="value4"></textarea>
      
      <button onclick="splitText()">Split!</button>
      <br>
      <label>Input Character:</label>
      <br>
     
      <input type="text" id="ccMain"  >
     
      <textarea id="output"></textarea>
      
   </body>
   </html>
<script>
 function splitText() {
      var textAreas = [];
      //Put all of the textareas into an array for easy access
      for(let i = 1; i <= 4; i++) {
      textAreas.push(document.getElementById(`value${i}`));
      }
      //Read the text from text1 and split it at a new line
      var text = textAreas[0].value;
      var [line1, line2] = text.split(/\r?\n/)
      for(let i = 0; i < 4; i++) {
      var combinedText = line1.substring(i, i+1) + line2.substring(i*2, (i+1)*2)
      textAreas[i].value = combinedText;
      }
      }
      $('#output').focus(()=>{
      var a=document.querySelectorAll('textarea');
      var str = $('#ccMain').val();
      var first = str[0];
      var second = str[1];
      console.log(first," ", second)
      var str='';
      a.forEach(e=>e.value.includes(first)||e.value.includes(second)?str+=e.value.substr(1,e.value.length):false)
      $('#output').val(str);
      })
</script>```

Here’s a run-able version with quite a few notes (but no fix) embedded - https://codepen.io/metasean/pen/9e44adb205bd9e6ac2f93cd0700d05e3?editors=0011

I wish these links would retain the layout, but they don’t.
I suggest you arrange it to look more like

The root of the problem is the order that a.forEach is iterating through the nodes, and what you do when there’s a match. Run the linked version with both ‘GF’ and ‘FG’ and pay close attention to the console.logs.

Please let us know if you get it working!