JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div id="div1">
    Выберите элементы<br>
    <span id="selected">0</span> выбранно
</div>
<div id="div2">
    <div class="item">1 элемент</div>
    <div class="item">2 элемент</div>
    <div class="item">3 элемент</div>
    <div class="item">4 элемент</div>
    <div id="back">Назад</div>
</div>

CSS

.selected {
    color: red
}

JavaScript

$(function () {
    var selected = 0;
    $('#div2').hide();
    $('#back').on('click', function () {
        $('#div2').hide();
        $('#div1').show();
        $('#selected').text(selected);
    });
    $('.item').on('click', function () {
        var $item = $(this);
        if ($item.hasClass('selected')) {
            $item.removeClass('selected');
            selected--;
        } else {
            $item.addClass('selected');
            selected++;
        }
    });
    $('#div1').on('click', function () {
        $('#div2').show();
        $('#div1').hide();
    });
});