title: jQuery hide div by id when other div's are visible?
body: <p>I have four divs with the same class. Each Div has a separate ID, 1,2,3,4.
  I want to use jQuery to hide my 'div id 1' if any of the other div's are visible and vice versa so if 'Div Id 4' is visible then all the other divs will be hidden.  </p>
  
  <p>I am brand new to jQuery so am trying to understand how I might do this. I would be grateful if somebody could please show me how I would be able to do this.</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>$(document).ready(function() {
    if  ($("#tracker2").is(":visible")) {
      $("#tracker1").hide();
    }
  });</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 class="stages" id="1"&gt;Supplier Contacted&lt;/div&gt;
  &lt;div class="stages" id="2"&gt;Supplier Registered&lt;/div&gt;
  &lt;div class="stages" id="3"&gt;Audit Complete&lt;/div&gt;
  &lt;div class="stages" id="4"&gt;Decision Made&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>