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>

          <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-blick;
}

#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");
      }
    });
  }

})();