Функция, не вызываемая для скрытого входного значения, изменена JQuery

Я пытаюсь получить значения всех скрытых полей ввода и найти сумму. Скрытое поле относится к классу mytotal. Ниже приведен код:

<div class = "row">
 <div class = "col-md-2">
     <label for = "brnos[]" class = "control-label" style = "width:100%">BR-NO</label>
     <input class = "form-control mybrands" type = "text" style = "width:100%;text-align: center;" name = "brnos[]" autocomplete = "off" required>
     <div id = "brList" style = "width:auto;"></div>
 </div>
 <div class = "col-md-2">
     <label for = "cases[]" class = "control-label" style = "width:100%">Cases</label>
     <input id = "cases" class = "form-control mycases" type = "number" style = "width:100%;text-align: center;" name = "cases[]" value = "0" autocomplete = "off" required>
     <input class = "form-control mytotal" type = "hidden" style = "width:100%;text-align: center;" name = "mytotal" value = "0">
 </div>
</div>

Я использую функцию для установки значения моего скрытого поля с помощью функции ajax, и она отлично работает. Ниже приведен код:

$(document).ready(function() {
        var doc;
        $(document).on("change", ".mycases", function() {
            doc = $(this);
            var value = doc.parent().parent('div').find('.mybrands').val();
            var cases = doc.val();
            var total_cases = $("#total_cases");
            if (value!='')
            {
                var CSRF_TOKEN = $('meta[name = "csrf-token"]').attr('content');
                $.ajax({
                    url: "{{ route('origin.find') }}",
                    type: 'POST',                  
                    data: {_token: CSRF_TOKEN,value:value},
                    success:function(data)
                    {
                       doc.parent('div').find('.mytotal').val(data.output*cases);
                    }
                });
            }
        });
    });

Я попытался предупредить значение .mytotal после изменения его значения внутри функции ajax, и оно показывает ожидаемое значение. Но когда я вызываю другую функцию ajax, чтобы найти сумму значений входов, имеющих класс «mytotal», он никогда не вызывается. Ниже мой код:

$(document).ready(function() {
        $(document).on("change", ".mytotal", function() {
            var sum = 0;
            $(".mytotal").each(function(){
                sum += +$(this).val();
                window.alert(sum);
            });
        });
    });

Поэтому вместо того, чтобы делать это скрытым полем, я сделал его как type = "number", и когда я вручную меняю значение этого поля, вызывается функция. Почему это происходит? Я хочу сделать это поле скрытым и функцию, которая будет вызываться при изменении ее значения. Как это решить? Пожалуйста помоги!