JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn boufi" onclick="showOnlyOne(this, 'box-1')">show Div #1</button>
  <div id="box-1" class="contentDiv">
    Div #1
  </div>
  <button class="btn boufi" onclick="showOnlyOne(this, 'box-2')">show Div #2</button>
  <div id="box-2" class="contentDiv">
      Div #2
  </div>
</div>
  <button class="btn boufi" onclick="showOnlyOne(this, 'box-3')">show Div #3</button>
  <div id="box-3" class="contentDiv">
      Div #3
  </div>
  <button class="btn boufi" onclick="showOnlyOne(this, 'box-119')">show Div #119</button>
  <div id="box-119" class="contentDiv">
      Div #119
  </div>

CSS

.container {
  display: inline-block;
  vertical-align: top;
  width: 100px;
}
.contentDiv {
  border: 1px solid blue;
  background-color: #99ccff;
  padding: 5px;
  width: 80px;
  display: none;
}
button {
  margin-bottom: 12px;
  padding: 6px 12px;
}

JavaScript

function showOnlyOne(button, theChosenOne) {
	var contentDivs = document.getElementsByClassName('contentDiv');
  for(var x=0; x < contentDivs.length; x++) {
  	var divId = contentDivs[x].getAttribute("id");
    if (divId == theChosenOne) {  
    	contentDivs[x].style.display = 'block';
    }
    else {
			contentDivs[x].style.display = 'none';
    }
  }

}