How to find sum of multiple inputs (inputs can increase by add button) from different containers?

function appendDiv() {
  var e = "<div>
  <button onclick='appendBox(this)'>ADD NUMBER BOX</button>
  <input type='number' class='sumOfTotal' readonly>
  </div>"
  $("body").append(e);
}

function appendBox(This) {
  var e = "<div><input type='number' class='number'></input>
  <button onclick='removeNum(this)'>DELETE NUM</button></div>"
  $(This.closest('div')).append(e);
}

function removeNum(This) {
  $(This.closest('div')).remove();
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/lab2.js"></script>
  </head>
  <body>

    <button onclick="appendDiv()">ADD DIV</button>

  </body>
</html>

I want to update value of sumOfTotal every time I change input values.
BUT each of someOfTotal boxes values have to be their div’s numbers’
sum.

Summary, each div has their own output (sumOfTotal) and inputs (number
class). And each div’s own output has to be its own numbers’ sum.