JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<div class="ancestor">
  <div id="template" class="col-wd-12 col-md-6 col-sm-4" style="display:none;">
    <!-- or
     <div id="template" class="col-wd-12 col-md-6 col-sm-4" style="visibility:hidden;" > 
     -->
    <div class="col loby"></div>
    <div class="overlay lobby-overlay"><a href="#">+</a></div>
  </div>
  <div class="parent">
    <div id="addLobby"> Add lobby
    </div>
  </div>
</div>

JavaScript

document.getElementById("addLobby").addEventListener("click", function(e) {
  document.getElementById("template").style.display = "initial";
  // or  
  // document.getElementById("template").style.visibility = "visible";

});