title: Change multiple div's css based on .filter return results
body: <p>I am trying to do a quick text check via Jquery, The text is brought in via an API </p>
  
  <pre><code>jQuery(function($){
          $('cite.fn').filter(function () {
          return ["Van", "Motorbike", "Truck"].includes($(this).text());
          }).css('color', 'red');
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;cite class="fn"&gt;&lt;?php echo $json['vehicle']; ?&gt;&lt;/cite&gt; 
  </code></pre>
  
  <p>This works fine, as in turns the text Red - If the response is Van, Truck or Motorbike</p>
  
  <p>However, what needs to happen is, if it is a Van, Truck or Motorbike then this div should show</p>
  
  <pre><code>    &lt;div class="citefailed"&gt;Sorry we can not offer &lt;?php echo $json['vehicle']; ?&gt; 
  Schemes at this time - Then a load of buttons and stuff is inside this div too&lt;/div&gt;
  </code></pre>
  
  <p>If the the Vehicle type is a Car then this div shows</p>
  
  <pre><code>&lt;div class="cited"&gt; continue the form blah blah&lt;/div&gt;
  </code></pre>
  
  <p>What I have tried is </p>
  
  <pre><code>    jQuery(function($){
          $('cite.fn').filter(function () {
          return ["Van", "Motorbike", "Truck"].includes($(this).text());
          }).css('color', 'red');
          $(".cited").css({display: "none"});
          $(".citefailed").css({display: "block"});
     });
  </code></pre>
  
  <p>and the css has</p>
  
  <pre><code>.citefailed{display:none;}
  .cited{display:block;}
  </code></pre>
  
  <p>But this just seems to add Display None to the Cited div and display block to the citefailed div either, whether its a car or a van. </p>
  
  <p>Please see fiddle <a href="https://jsfiddle.net/hatorex1/1/" rel="nofollow noreferrer">https://jsfiddle.net/hatorex1/1/</a></p>
  
  <p>Can some advise please</p>