title: jQuery - multiple modals separate handling
body: <p>If you click the Apple icon the modal appears and then if click away it disappears. </p>
  
  <p>If you click the Google icon the modal appears (and is set to not disappear). </p>
  
  <p><strong>The goal:</strong> to <code>toggle</code> the <code>active</code> class for the Google <code>modal</code> when the <code>#google</code> icon is clicked (i.e show/hide the modal when the google img is clicked and not when the user clicks away like the apple modal)</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>$('.button').on('click', function() {
    const id = $(this).prop('id');
    $('.modal').each(function() {
      $(this).toggleClass('active', $(this).data('id') == id);
    });
  });
  $(document).on("click", function(e) {
    if (($(".apple-modal").hasClass("active")) &amp;&amp; (!$(".modal, .modal *, .button").is(e.target))) {
      $(".modal").removeClass("active");
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
    height: 30px;
  }
  
  .header {
    height: 15px;
    background: #eee;
  }
  
  .modal {
    position: fixed;
    top: 72px;
    right: 15px;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transform-origin: top right;
    transition: 0.15s;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  }
  
  .modal:after {
    content: "";
    width: 15px;
    height: 15px;
    background: inherit;
    position: absolute;
    background: #eee;
    top: -6px;
    right: 8px;
    opacity: 0;
    visibility: hidden;
    transform: rotate(45deg) scale(0.5);
    transition: 0.15s;
  }
  
  .modal.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  
  .modal.active:after {
    opacity: 1;
    visibility: visible;
    transform: rotate(45deg) scale(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" /&gt;
  &lt;img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" /&gt;
  &lt;div class="modal" data-id="google"&gt;
    &lt;div class="header"&gt;Google&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        First&lt;/li&gt;
      &lt;li&gt;
        Second&lt;/li&gt;
      &lt;li&gt;
        Third&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="modal apple-modal" data-id="apple"&gt;
    &lt;div class="header"&gt;Apple&lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        First&lt;/li&gt;
      &lt;li&gt;
        Second&lt;/li&gt;
      &lt;li&gt;
        Third&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>