JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-trigger="div1">Show Div1</a>
<br/>
<a href="#" data-trigger="div2">Show Div2</a>
<br/>
<a href="#" data-trigger="div3">Show Div3</a>
<br/>
<a href="#" data-trigger="div4">Show Div4</a>
<div class="container">
  <div class="product studentbostader div1">1</div>
  <div class="toggle div2">2</div>
  <div class="toggle div3">3</div>
  <div class="toggle div4">4</div>
</div>

<div id="clone">
</div>

CSS

.toggle {
    height: 100px;
    width: 100px;
    background-color: red;
}
.div1 {
    display: none;
    background-color: blue;
}
.div2 {
    display: none;
    background-color: yellow;
}
.div3 {
    display: none;
    background-color: grey;
}
.div4 {
    display: none;
    background-color: green;
}

JavaScript

function clickHandler(event) {
    var contentDivs = document.getElementsByClassName("product"); // get live set of contentDivs in case any were added dynamically
    var trigger = event.target;
    var selector = "." + trigger.getAttribute("data-trigger");
    var divsToShow = document.querySelectorAll(selector); // grab all matching divs
    for (var i = 0; i < contentDivs.length; i++) {
        contentDivs[i].style.display = "none";
    }
    for (var j = 0; j < divsToShow.length; j++) {
        divsToShow[j].style.display = "block";
    }
}
var toggleControls = document.querySelectorAll("[data-trigger]");
for (var i = 0; i < toggleControls.length; i++) {
  toggleControls[i].addEventListener("click", clickHandler);
}


function cloneDiv() {                
  var elmnt = document.getElementsByClassName("container");

  for ( var i=0; i<elmnt.length; i++ ) {
    var cln = elmnt[i].cloneNode(true);
  }
  document.body.appendChild(cln);
  document.getElementById("clone").appendChild(cln);
}
window.onload = cloneDiv();