Как передать несколько значений span в несколько инпутов с одинаковыми кассами и id?

Question

[aisbdisd]

Есть такие строчки:

<div class="sample_goal"><span class="sample" style="display: none;">45000</span></div>
                        <input type="text" id="input" value="">
<div class="sample_goal"><span class="sample" style="display: none;">28000</span></div>
                        <input type="text" id="input" value="">
<div class="sample_goal"><span class="sample" style="display: none;">39000</span></div>
                        <input type="text" id="input" value="">

Все классы и id одинаковые, изменяются только числа.

Передаю значения из span class="sample" в input id="input" таким кодом:

var input = document.getElementById('input'),
lol_divs = document.getElementsByClassName('sample'),
        lol_div;
        input.value = lol_divs[0].innerHTML;

Но передаётся только первое значение (45000) в первое поле. А нужно передавать каждое число по порядку в каждый input, не изменяя классы и id.

Как это реализовать?

Comments

[Rsa97]

По стандарту HTML в документе не может быть элементов с одинаковыми id. В такой ситуации браузеры задают id только первому встреченному элементу и игнорируют для остальных.

Answer 1

[Rsa97]

const goals = document.querySelectorAll('div.sample_goal span');
const inputs = document.querySelectorAll('div.sample_goal + input');
goals.forEach((el, idx) => input[idx].value = el.innerHTML);