есть два инпута, в которых стрелки по умолчанию я убрала и добавила кнопки. как из них выводить данные в реальном времени в другой div, так, чтобы затем полученные цифры я могла использовать для подсчета total?
Отсюда беру
<div>
<div class="input-number input1">
<button class="style_pm" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange(); ">-</button>
<input class="style_input I-1" id="I1" type="number" min="0" value="0" readonly oninput="snd('I1 , B1')">
<button class="style_pm" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
</div><br>
<div class="input-number">
<button class="style_pm" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button>
<input class="style_input I-2" id="I2" type="number" min="0" readonly>
<button class="style_pm" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>
</div>
И сюда вставляю
<div class="total">
<div class="estimation">
<div><span id="B1"></span>Basic (20 €)<br>
<span id="S1"></span>Senior (10 €)</div>
<div><span id="sum1"></span><br> <span id="sum2"></span></div>
</div>
<div class="estimation_total">Total: <span id="TOTAL"></span></div>
</div>
Стили
input[id="I1"], input[id="I2"]
{
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
input[id="I1"]::-webkit-outer-spin-button,
input[id="I2"]::-webkit-outer-spin-button,
input[id="I1"]::-webkit-inner-spin-button,
input[id="I2"]::-webkit-inner-spin-button
{
display: none;
}
.input1
{
margin-top: 20px;
}
.style_input {
background: var(--white);
width: 40px;
height: 25px;
border: none;
text-align: center;
font-size: 18px;
font-weight: 400;
padding-left: 0 0 0 10px;
}
.style_pm {
width: 40px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
background-color: black;
color: white;
font-size: 25px;
font-weight: 300;
}