JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    You don't need a generic class to format the style for every content DIV below.  The CSS section>div covers every content block.
</section>

<div>
    <button onmouseup="fncAllDry('dry')">All Dry</button>    
</div>

<br/>

<section id='allProduct'>
  <div class='wet'>    
    <div style='color:red'>
        Content One Wet
    </div>
  </div>

  <div class='wet'>
    <div>
        Content Two Wet
    </div>
  </div>

  <div class='dry'>
    <div>
        Content Three Dry
    </div>
  </div>
  
  <div class='wet'>
    <div>
        Content Four Wet
    </div>
  </div>

  <div class='wet'>
    <div>
        Content Five Wet
    </div>
  </div>
  <div class='dry'>
    <div>
        Content Six Dry
    </div>
  </div>

  <div class='dry'>
    <div>
        Content Seven Dry
    </div>
  </div>

  <div class='wet'>
    <div>
        Content Eight Wet
    </div>
  </div>    
</section>

CSS

section>div
{
  display:inline-block;
  background-color:yellow;
}

JavaScript

window.fncAllDry = function(argWhichDryWet) {
  //alert('it ran');
    if (argWhichDryWet === 'dry') {

    var boxes = document.getElementsByClassName('wet'),
        i = boxes.length;

    while(i--) {
        boxes[i].style.display = "none";
    };
        
    var dryBoxes = document.getElementsByClassName('dry'),
        i = dryBoxes.length;

    while(i--) {
        dryBoxes[i].style.display = "inline-block";
    };
  };
};