JSFiddle - React, Tailwind, and code Playground
HTML
<div id="calculat">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div>
<input type="checkbox" class="kass" name="opis1">
Касс1
<div class="opisan" id="opis1">
<table width="231" border="0" align="center" id="calc">
<tbody>
<tr>
<td width="161"><label for="kkm_k31">ККМ: </label>
<select 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"> </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"> </td>
</tr></tbody></table>
</div>
</div>
</td>
</tr>
<tr>
<td><div>
<span id="opisan"> <input type="checkbox" class="kass" name="opis2"> Касс2</span>
<div class="opisan" id="opis2">
<table width="231" border="0" align="center" id="calc">
<tbody>
<tr>
...
CSS
.opisan {
display:none;
}
#opisan {
display:none;
}
JavaScript
jQuery(document).ready(function() {
//Спойлер
jQuery('.kass').click(function() {
var idel = jQuery(this).attr("name");
jQuery('div #' + idel).toggle(700, calculate);
jQuery('div #opisan').show();
});
//Калькулятор
jQuery("#calculat").change(calculate);
function calculate() {
var totalSum = 0;
jQuery("select[name^='kkm']:visible, select[name^='pk']:visible").each(function() {
var idElement = "#" + jQuery(this).attr("name"),
//Получаем id элемента
countField = parseInt(jQuery(this).val()); //значение элемента
jQuery(idElement + "_count").text(countField); //Выводим сумму по позиции
totalSum += countField; //* priceField;
});
jQuery("#count_price span span").text(totalSum);
}
})(jQuery);