jquery - update value based on json data + value from inputbox

Question

I have a flask template which creates 4 forms with an amount input boxes + labels which should contain price based on the value from the input box * values I get as json from a REST: html snippet:

<div class="mbr-overlay" style="opacity: 0.2; background-color: rgb(35, 35, 35);">
</div>

<div class="container">
    <div class="media-container-row">
        {% for currency in currencies %}
        <div class="card  col-12 col-md-6 col-lg-4">
            <div class="card-img">
                <p><img src="/assets/images/logo_{{ currency.name }}.png" height="128" width="128" /></p>
            </div>
            <div class="card-box align-center">
                <form id="{{ currency.unit }}" name="buy" class="{{ currency.unit }}" method="POST" action="/buy">
                    <p>
                        <!-- do not change the ID here -->
                        <input id="{{ currency.unit }}" name="amount" class="input" type="number" max="{{ currency.max }}" min="{{ currency.min }}" value="{{ currency.min }}" step="1" required /> {{ currency.buy_unit }}
                        <input id="currency" name="currency" type="hidden" value="{{ currency.name }}" />
                        <input id="unit" name="unit" type="hidden" value="{{ currency.unit }}" />
                        <input id="buy_unit" name="buy_unit" type="hidden" value="{{ currency.buy_unit }}" />
                    </p><p>
                        <div class="mbr-section-btn text-center">
                            <input id="submit" name="submit" class="btn btn-secondary display-4" type="submit" value="Koupit" />
                        </div>
                        <span class="price">Cena: {{ currency.price }}</span>
                    </p>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

jquery snippet:

<script>
var formatter = new Intl.NumberFormat('cs-CZ', { style: 'decimal', maximumFractionDigits: 0, });

$(document).on('mouseenter mouseleave change input submit', '.input', function(){
  var par = $(this);
  var val = $(this).val();
  var idx = $(this).attr('id');

$.ajax({
  type: "GET",
  url: "/exchange_rates",
  dataType: 'json',
  success: function(response){
             var obj = response;
             par.closest('p').siblings('p').find('span.price').html(formatter.format((obj[idx] * val)/1000) + ' Kč');
             par.closest('p').siblings('p').find('span.price').css({"color": "green", "font-weight": "bold"});
             console.log("index:    " + idx);
             console.log("value:    " + val);
             console.log("obj[idx]: " + obj[idx]);
             console.log("sum:      " + (obj[idx] * val)/1000);
    }
  });             
});

$(document).ready(function(){
  $(".input").trigger("input");
});

How should I modify it in order to have the values updated properly with the values and css style?

Thank you in advance.

Answer 1

The answer from Elias Mason at jquery .on change doesn't trigger was inspiring enough, although it still doesn't work for me as expected, I don't thing anyone would like to answer it, therefore I would like to close this topic.