title: How to add multiple dropdown with checkboxes in HTML?
body: <p>My HTML code is:</p>
  <pre><code> &lt;div id=&quot;list1&quot; class=&quot;dropdown-check-list&quot; tabindex=&quot;100&quot;&gt;
        &lt;span class=&quot;anchor&quot;&gt;Select Months&lt;/span&gt;
        &lt;ul class=&quot;items&quot;&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Apr &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;May&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;June &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;July &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Aug &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Sep &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Oct&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Nov&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Dec&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Jan&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Feb&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Mar&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;list2&quot; class=&quot;dropdown-check-list&quot; tabindex=&quot;100&quot;&gt;
        &lt;span class=&quot;anchor&quot;&gt;Select Quarter&lt;/span&gt;
        &lt;ul class=&quot;items&quot;&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Quarter 1&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Quarter 2&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Quarter 3&lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Quarter 4 &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;list3&quot; class=&quot;dropdown-check-list&quot; tabindex=&quot;100&quot;&gt;
        &lt;span class=&quot;anchor&quot;&gt;Select Monthly/Yearly&lt;/span&gt;
        &lt;ul class=&quot;items&quot;&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;6 Months &lt;/li&gt;
          &lt;li&gt;&lt;input type=&quot;checkbox&quot; /&gt;Year&lt;/li&gt;
        
        &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My CSS code is:</p>
  <pre><code>.dropdown-check-list {
    display: inline-block;
  }
  .dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
  }
  
  .dropdown-check-list .anchor:after {
    position: absolute;
    content: &quot;&quot;;
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
  .dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
  }
  
  .dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
  }
  
  .dropdown-check-list ul.items li {
    list-style: none;
  }
  
  .dropdown-check-list.visible .anchor {
    color: #0094ff;
  }
  
  .dropdown-check-list.visible .items {
    display: block;
  }
  </code></pre>
  <p>My Javascript code is:</p>
  <pre><code>var checkList = document.getElementById('list1');
      checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
        if (checkList.classList.contains('visible'))
          checkList.classList.remove('visible');
        else
          checkList.classList.add('visible');
      }
    &lt;/script&gt;
  
    &lt;script&gt;
      var checkList = document.getElementById('list2');
      checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
        if (checkList.classList.contains('visible'))
          checkList.classList.remove('visible');
        else
          checkList.classList.add('visible');
      }
    &lt;/script&gt;
  
    &lt;script&gt;
      var checkList = document.getElementById('list3');
      checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
        if (checkList.classList.contains('visible'))
          checkList.classList.remove('visible');
        else
          checkList.classList.add('visible');
      }
  &lt;/script&gt;
  </code></pre>
  <p>I tried running this code, but by clicking the first and second dropdown only the 3rd dropdown works, the first and second dropdown are not working, so which means that by clicking the first dropdown the 3 dropdown expands and same happens with second.
  If someone could please help me out,
  Thank you.</p>