<div id="inputs">
<input type="text" id="input1" value="1"/>
<input type="text" id="input2" value="1"/>
</div>
<button id="addInput" title="Добавить покупку">Добавить покупку</button>
<button id="doSum" title="Сложить числа" >Сложить числа</button>
<p id="line">Cумма ваших покупок: <span id="sum"></span></p>
<script>
// Добавить инпут
document.querySelector('#addInput').addEventListener('click', function() {
let input = document.createElement('input'); // создаём инпут, а далее проставляем ему атрибуты
input.type = 'text';
input.id = 'input' + document.querySelectorAll('#inputs input').length;
input.value = 1;
document.querySelector('#inputs').appendChild(input); // Вставляем инпут в конец блока inputs
});
// Сумма
document.querySelector('#doSum').addEventListener('click', function() {
let numbers = []; // пустой массив - сюда будем добавлять значения из инпутов
// все инпуты
let allInputs = document.querySelectorAll('#inputs input');
// Собираем значения из всех инпутов и добавляем их в массив numbers
document.querySelectorAll('#inputs input').forEach(el => numbers.push(+el.value));
console.log(numbers);
// Сумма всех инпутов
let summa = numbers.reduce((acc, element) => acc + element);
document.querySelector('#sum').innerText = summa;
});
</script>