JSFiddle - React, Tailwind, and code Playground

HTML

<div id="type1" class="type"><h3>1.2 Select material v1</h3>
                       		<span id="value">x</span><button class="bob" type="button" name="material" value="1">tiles 1</button>
							<span id="value">x</span><button  class="bob" type="button" name="material" value="2">tiles 2</button>					<span id="value">x</span><button  class="bob" type="button" name="material" value="3">tiles 3</button>                       </div>
              
              
              <div id="material1" class="material">
                        	<input  class="select_all" type="checkbox" name="tile[]" value="1">Tile 1
                           	<input  class="select_all" type="checkbox" name="tile[]" value="2">Tile 2
                            <input clas="select_all" type="checkbox" name="tile[]" value="3">Tile 3
                        </div>
                        <div id="material2" class="material">
                        		<input  class="select_all" type="checkbox" name="tile[]" value="4">Tile 4
                           	<input  class="select_all" type="checkbox" name="tile[]" value="5">Tile 5
                            <input clas="select_all" type="checkbox" name="tile[]" value="6">Tile 6
                        </div>
                        <div id="material3" class="material">
                        	<input  class="select_all" type="checkbox" name="tile[]" value="7">Tile 7
                           	<input  class="select_all" type="checkbox" name="tile[]" value="8">Tile 8
                            <input clas="select_all" type="checkbox" name="tile[]" value="9">Tile 9
                        </div>

CSS

.material {
		display: none;
    padding-top: 15px;
	}

JavaScript

$(document).ready(function() {
		    $(".bob").click(function () {
		    var divname = this.value;
			$(this).addClass("active")
		       $("#material"+divname).show().siblings('.material').hide();
			    });
		
		  });
      
   
 $(function() {
	$('#value').text('');
	
	var generallen = $(".material input[name='tile[]']:checked").length;
	if(generallen>0){$("#value").text('('+generallen+')');}else{$("#value").text(' ');}
})

function updateCounter() {
    var len = $(".material input[name='tile[]']:checked").length;
	if(len>0){$("#value").text('('+len+')');}else{$("#value").text(' ');}
}

$("#general-content input:checkbox").on("change", function() {
	updateCounter();
});