JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<ul id="ingred"></ul>
<a href="#" class="add-contact">+ Добавить ингредиент</a>
<div id="sumAll"></div>
</div>
CSS
.container { margin-top: 10px; width: 340px; }
ul { margin:0; padding:0; }
#ingred > li { position:relative; list-style: none; }
#ingred > li > span {
display:none;
cursor:pointer;
position:absolute;
right: 5px;
top: 0px;
color: red;
}
#ingred > li:hover > span { display: inline-block; }
input { width:50px; }
JavaScript
var sakhar = [
['Карамель', 3.11, 0, 0.001, 0.777],
['Шоколад темный', 5.64, 0.054, 0.353, 0.526]
];
var orekhi = [
['Арахис', 5.82, 0.263, 0.452, 0.097],
['Грецкий орех', 6.75, 0.138, 0.613, 0.102],
['Миндаль', 6.78, 0.186, 0.577, 0.136],
['Семя подсолнечника', 6.09, 0.207, 0.529, 0.05],
['Фундук', 7.37, 0.161, 0.669, 0.099]
];
var cats = [
[sakhar, 'Карамель, шоколад'],
[orekhi, 'Орехи']
];
var sumId = [];
var sum = [];
var sumx = [];
var total = [0,0,0,0,0];
$("#ingred").on("click", "span", function () {
//var anchor = $(this).siblings('a');
//$(anchor.attr('href')).remove();
//id = ;
$(this).parent("li").remove();
$("#ingred li").children('a').first().click();
//sumId.splice(id,1);
//console.log('sumId del'+sumId);
});
$('body').on('keyup', 'input', function () {
for ( var c in total ){
total.splice(c,1, 0);
}
sum.shift();
for ( var x in sumId ){
var i = 0;
for ( var v in total ){
console.log('total:'+total+' sum:'+sum);
total[v]+=sum[v];
total[v] = Math.floor(total[v]*100)/100;
}
}
sum.unshift();
$('div#sumAll span').remove();
$('div#sumAll').append('<span>Общая:<br/><strong>Масса:</strong>'+total[0]+', <strong>кКал:</strong>'+total[1]+', <strong>Белки:</strong>'+total[2]+', <strong>Жиры:</strong>'+total[3]+', <strong>Углеводы</strong>:'+total[4]+'</span>');
});
$('.add-contact').on("click", function () {
var id = $("#ingred").children().length; //think about it ;)
var tabId = 'item' + id;
$('#ingred').append('<li><div id="' + tabId + '"><select data-placeholder="Продукт" class="chosen-select'+id+'"></select></div><span> x </span></li>');
for ( var a in cats ){
var ne = cats[a][0];
$('<optgroup label="'+cats[a][1]+'"></optgroup>').appendTo('select');
for ( var b in ne ){
$('<option...