JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<div id="general-content">
    <div id="type1" class="type">
        <h3>1.2 Select material v1</h3>
        <span class="value">x</span>
        <button class="bob" type="button" name="material" value="1">tiles 1</button>
        <span class="value">x</span>
        <button class="bob" type="button" name="material" value="2">tiles 2</button>
        <span class="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>
</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();
    });
    $('#value').text('');

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

function updateCounter() {
    var $material = $(this).closest('.material');
    var $value = $(".value").eq($material.index('.material'));
    var len = $material.find("input[name='tile[]']:checked").length;
    $value.text(len > 0 ? '(' + len + ')' : 'x');
}