JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parentDiv">
  <button type="button" id="myButton">Button 1</button>
  <div class="childDiv" , id="dropdown">
    <div class="cont"> Point 1</div>
    <div class="cont"> Point 2</div>
  </div>
</div>
<div class="parentDiv">
  <button type="button" id="myButton2">Button 2</button>
  <div class="childDiv" , id="dropdown2">
    <div class="cont"> Point 3</div>
    <div class="cont"> Point 4</div>
  </div>
</div>

CSS

.parentDiv {
  display: inline-block;
  position: relative;
}

#myButton {
  padding: 5px;
}

.childDiv {
  display: none;
  position: absolute;
  padding-right: 5px;
}

.childDiv.is-active {
  display: block;
}

JavaScript

var myButton = document.getElementById("myButton");
var dropdDown = document.getElementById("dropdown");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();


var myButton = document.getElementById("myButton2");
var dropdDown = document.getElementById("dropdown2");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();