JavaScript складывание чисел

У меня существует 10 кнопок, 1 input, 1 кнопка. При нажатии на любую кнопку выводится в input соответствующая цифра (кнопка 1 - выводится цифра 1, и тд.). Но, в input выводится следующим образом: "1+1+1+1", как сделать чтобы эти числа складывались и выводились в h1 под id "textGPA"? То бишь получилось 4.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary mr-2">1</button>
        <button type="button" class="btn btn-secondary mr-2">2</button>
        <button type="button" class="btn btn-secondary mr-2">3</button>
        <button type="button" class="btn btn-secondary mr-2">4</button>
        <button type="button" class="btn btn-secondary mr-2">5</button>
        <button type="button" class="btn btn-secondary mr-2">6</button>
        <button type="button" class="btn btn-secondary mr-2">7</button>
        <button type="button" class="btn btn-secondary mr-2">8</button>
        <button type="button" class="btn btn-secondary mr-2">9</button>
        <button type="button" class="btn btn-secondary mr-2">10</button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary mr-2 mt-5" id="addGPA">Рассчитать балл</button>
    </div>
</div>
    <h1 id="textGPA"></h1>




let input = document.querySelector('input');
let textGPA = document.getElementById('addGPA');

document.querySelector('.btn-group').addEventListener( 'click', e => {
   if (e.target.tagName === 'BUTTON' ) {
      input.value += e.target.innerText + '+';
      console.log(e)
   }
})

Буду благодарен