title: Javascript - Append once in condition check in a for loop
body: <p>I have an array <code>mainTitle</code> that I am attempting to check if the string exists in <code>listOfTitles</code> then append to <code>#mainTitle</code>. If not then append to <code>#otherTitle</code>. In order to achieve this, I am looping through the array <code>listOfTitles</code> in order to check if any of the strings match with the first index of <code>mainTitle</code></p>
  <p>My issue is that string appends for every time the check fails due to the length of the array I am looping through. In this example, <code>&quot;Online&quot;</code> should only appear once in blue text, and <code>&quot;Retail&quot;</code> and <code>&quot;Store&quot;</code> which doesn't exist in <code>listOfTitles</code> should only appear once in red text.</p>
  <p>I am attempting to have the string append-only once. How can I achieve with when needing to increment through the entire array in order to check if there is a match?</p>
  <p>My expected outcome is to have only <strong>1</strong> <code>&quot;Online&quot;, &quot;Retail&quot;, and &quot;Store&quot;</code> to append and not the length of the string.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const mainTitle = ["Online", "Retail", "Store"]
  
  const listOfTitles = ["Test","Test2","Test3","Test4","Test5","Test6", "Online", "Test7"]
  
  
  for (let i = 0; i &lt; mainTitle.length; i++) {
   
  
  checkMatch(mainTitle[i])
  
  };
  
  function checkMatch (title) {
  
  for (let i = 0; i &lt; listOfTitles.length; i++) {
  
  if (title=== listOfTitles[i]) {
  $("#mainTitle").append(title);
  } else {
  $("#otherTitle").append(title);
  }
  
  
  }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mainTitle {
  color:blue;
  }
  
  #otherTitle {
  color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="mainTitle"&gt; &lt;/div&gt;
  &lt;div id="otherTitle"&gt; &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>