JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo1">
un
</div>
<div id="foo2">
deux
</div>
<div id="foo3">
trois
</div>
<div id="foo4">
quatre
</div>
<input type="button" id="go" value="go" />

CSS

div:nth-of-type(even) { display:none; }
 div:nth-of-type(odd) { display:block; }

JavaScript

function ShowHide(id) 
{
 collection= document.querySelectorAll("[id^='"+id+"']");
cl= collection.length;
	for (i = 0; i < cl; i++) { 
  
   visistatus = window.getComputedStyle(collection[i], null).getPropertyValue("display");

collection[i].style.display = (visistatus=='none')?'block':'none';
    }
    
   }
  
  document.getElementById('go').addEventListener("click",function(){
  ShowHide('foo')
  })