JSFiddle - React, Tailwind, and code Playground

by studasd

HTML

<div id="calculat">
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><div>
                    <input type="checkbox" class="kass">
                    Касс1
                    <div class="opisan">
                        <table width="231" border="0" align="center" id="calc">
                            <tbody>
                                <tr>
                                    <td width="161"><label for="kkm_k31">ККМ: </label>
                                        <select id="kkm_k31" class="selectcalc" name="kkm_k31">    
                                           <option value="0">Имеется</option><option value="17000">Касби</option><option value="7500">Fprint</option><option value="24000">Атол</option></select></td>
                                    <td width="159" class="cenaid" id="kkm_k31_count">&nbsp;</td>
                                    </tr>
                                <tr>
                                    <td><label for="pk_k31">ПК :</label>
                                        <select id="pk_k31" class="selectcalc" name="pk_k31">    
                                           <option value="0">Имеется</option><option value="12000">Pentium i3</option><option value="15000">Pentium i5</option></select></td>
                                    <td id="pk_k31_count" class="cenaid">&nbsp;</td>
                                   </tr></tbody></table>
                        </div>
                    </div></td>
               </tr>
            <tr>
                <td><div>
                    <input type="checkbox" class="kass">
                    Касс2
                    <div class="opisan">
                        <table width="231" border="0" align="center" id="calc">
                            <tbody>
                                <tr>
                                    <td width="161"><label for="kkm_k32">ККМ: </label>
                                       ...

CSS

.opisan {
    display:none;
    }

JavaScript

jQuery(document).ready(function() {

    //Спойлер
    jQuery('.kass').click(function() {
        jQuery(this).parent().children('div .opisan').toggle(700, calculate);
    });

    //Калькулятор
    jQuery("#calculat").change(calculate);

    function calculate() {
        var totalSum = 0;

        jQuery("select[id^='kkm']:visible, select[id^='pk']:visible").each(function() {
            var idElement = "#" + jQuery(this).attr("id"),
                //Получаем id элемента
                countField = parseInt(jQuery(this).val()); //значение элемента
            jQuery(idElement + "_count").text(countField); //Выводим сумму по позиции
            totalSum += countField; //* priceField;
        });
        jQuery("#count_price span span").text(totalSum);
    }

})(jQuery);