const $tt = document.querySelector(`.tt`);
addEventListener(`click`, e => {
const $target = e.target.closest(`[data-id]`);
const $price = $target.querySelector('#tar_price').innerHTML;
if (!$target) return;
const $id = document.getElementById(`id-${$target.dataset.id}`);
if ($id){
$id.querySelector(`input`).value = $id.dataset.count = +$id.dataset.count + 1;
$id.querySelector(`#obj_price`).innerHTML = ($id.dataset.count = +$id.dataset.count) * $price;
}else {
$tt.insertAdjacentHTML(`beforeend`,
`<div class="count" id="id-${$target.dataset.id}" data-count="1">
<input type="text" value="1">
<span class="obj_price" id="obj_price">${$price}</span>
</div>`
);
}
})
.clickers-parent {
display: flex;
width: 100px;
}
.clicker,
.count {
width: 50%;
margin: 0 10px;
border: 1px solid #b7b7b7;
border-radius: 5px;
text-align: center;
padding: 5px 36px;
background: #e2e2e2;
cursor: pointer;
transition: 0.2s;
user-select: none;
}
.clicker:hover {
background: #d6d6d6;
}
<div class="clickers-parent">
<div class="clicker" data-action="add-info" data-id="1">
<div class="card">
<div class="card-body">
<div class="media">
<div class="media-body">
<div class="prod_id" id="1">push me</div>
<div class="tar_price" id="tar_price">5</div>
</div>
</div>
</div>
</div>
</div>
<div class="clicker" data-action="add-info" data-id="2">
<div class="card">
<div class="card-body">
<div class="media">
<div class="media-body">
<div class="prod_id" id="2">and me</div>
<div class="tar_price" id="tar_price">10</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tt">
<span>Сумма: </span><span id="total" class="total"></span>
</div>
Подскажите, как получить сумму чисел в span class/id total из полей span class/id obj_price которые получаются в результате нажатия на блоки "push me" и "and me"?