Javascript: как рассчитать несколько входных значений в цикле с помощью javascript?

Я пытаюсь вычислить значение некоторого поля ввода в моем шаблоне Django, используя javascript (onkeyup=(), форма находится в цикле, например, {% for p в прогнозе %} {% endfor %}.

У меня есть эта простая строка для захвата входных значений (ПРИМЕЧАНИЕ: они находятся в цикле)

   let stake_amount_input = document.querySelector("#amount").value
   let shares_amount_input = document.querySelector("#shares").value

Основываясь на том факте, что у меня есть все эти функции в цикле Django, разве я не должен получать все значения полей ввода при вычислении других объектов в цикле?

Основываясь на том факте, что у меня есть все эти функции в цикле Django, я не должен получать все шансы, когда я console.info(odds)

{% for p in prediction.prediction_data.all %}
  <form action = "#" method = "POST">
     <input type = "number" value = "" name = "amount" id = "amount" class = "shares" onkeyup = "CalculateNewBalance()">
     <input type = "number" value = "" name = "shares" id = "shares" class = "shares" onkeyup = "CalculateNewBalance()">

    <script>
      function CalculateNewBalance(){
          let stake_amount_input = document.querySelector(".amount").value
          let shares_amount_input = document.querySelector(".shares").value
          let potential_win = document.querySelector(".potential-win")

          let potential_win_value = parseFloat(stake_amount_input) * parseInt(shares_amount_input)
          potential_win.innerHTML = "$" + potential_win_value
          
          // if the potential_win innerHTML shows Nan, then i want to change the innerHTML to $0.00, but this is not working too
         if (potential_win === isNan) {
             potential_win.innerHTML = "$0.00"
         }

                                                        
    </script>
    </form>
{% endfor %}

Обновлено: Мой шаблон

<div class = "mid-area">
    <div class = "single-area">
        <div class = "item-title d-flex align-items-center justify-content-between">
            <span>Choose Stake Amount</span>
        </div>
        <div class = "d-flex in-dec-val">
            <input type = "number" required value = "{{ p.amount }}" name = "amount" placeholder = "amount" class = "shares" />

            <div class = "btn-area">
                <button class = "plus" type = "button">
                    <img src = "{% static 'assets/images/icon/up-arrow.png' %}" alt = "icon" />
                </button>
                <button class = "minus" type = "button">
                    <img src = "{% static 'assets/images/icon/down-arrow.png' %}" alt = "icon" />
                </button>
            </div>
        </div>

        <p id = "error-div" class = "mt-2"></p>
    </div>
    <div class = "single-area quick-amounts"></div>
    <div class = "single-area quick-amounts">
        <div class = "item-title d-flex align-items-center">
            <p>Choose <b>Shares</b> Amount</p>
        </div>
        <div class = "d-flex in-dec-val">
            <input type = "number" required value = "1" name = "shares" placeholder = "shares" class = "shares" />

            <div class = "btn-area">
                <button class = "pldus" type = "button">
                    <img src = "{% static 'assets/images/icon/up-arrow.png' %}" alt = "icon" />
                </button>
                <button class = "mindus" type = "button">
                    <img src = "{% static 'assets/images/icon/down-arrow.png' %}" alt = "icon" />
                </button>
            </div>
        </div>
    </div>

    <div class = "single-area smart-value">
        <div class = "item-title d-flex align-items-center">
            <p class = "mdr text-capitalize">Potential win</p>
        </div>
        <div class = "contact-val d-flex align-items-center"><span style = "font-size: 24px;" class = "potential-win">$0.00</span><br /></div>
    </div>
</div>