title: How to modify a string based on a checkbox array?
body: <p>I have a function that have : <br> 
  - Inputs : an array of Data </p>
  
  <pre><code>[
      {"position":"1","token":"Darién","tag":"PERSON"},
      {"position":"2","token":"Gap","tag":"PERSON"},
      {"position":"3","token":"make","tag":"O"},
  ] 
  </code></pre>
  
  <p>I iterate that array to get the token and tag and then based on a checkbox selection (person or country ...etc) I make the token string red and show it in a div element. </p>
  
  <pre><code> function makeNamesRed(array) {
  
          let result = ''
  
          array.forEach((element, index, array) =&gt; {
              var word = element.token;
              var tag = element.tag;
  
              var checkedElements = new Array();
              $("input:checkbox[name=selectionFilter]:checked").each(function () {
                  checkedElements.push($(this).val());
              });
  
              checkedElements.forEach((elementCheck, indexCheck, arrayCheck) =&gt; {
  
                  if (word != "-LRB-" &amp;&amp; word != "-RRB-") {
  
                      if (tag == elementCheck) {
                          word = "&lt;span class='namePerson' "
                               + "style='color:red;' "
                               + "data-toggle='tooltip' "
                               + "data-placement='top' "
                               + "title='Name of a person'&gt;" 
                               + word 
                               + "&lt;/span&gt;";
                          result += word + " ";
                      }
  
                      else {
                          result += word + " ";
                      }
                  }
  
              })
          })
          $("#editor").html(" ");
          $("#editor").html(result);
      }
  </code></pre>
  
  <p>The problem is that looping the selected checkbox array (checkedElements) here</p>
  
  <pre><code>else {
      result += word + " ";
  } 
  </code></pre>
  
  <p>adds the words (that are not found) every time again. like so : <strong>Darién make make make</strong>. Number of repetition in make depends on how many checkboxes are selected.</p>
  
  <p>Do you have an idea how to solve that and make that better ? </p>
  
  <p>EDIT: Here is a Jsfiddle of that scenario : </p>
  
  <p><a href="https://jsfiddle.net/anoumaru/cqdjm13v/13/" rel="nofollow noreferrer">Scenario</a></p>