to better explain the scenario here is what i am doing

document.addEventListener('readystatechange', function(e) {
        switch (e.target.readyState) {
            case "complete":
                
                $('.totalsTeal').trigger('input');
            break;
        }
    });

$(document).on('input', '.totalsTeal', function() {
        let self = $(this);
        let day = self.attr('data-name');
        console.log(self.val());
        if (self.val() === "0.00") {
            $('#w1_' + day).parent().find('label').css('display', 'none');
        } else {
            $('#w1_' + day).parent().find('label').css('display', 'block');
        }
    });

so everytime, the value entered in the input field will have the updated value in the input field having a class of .totalsTeal and it should fire, the class is common to 3 or 4 inputs and every input works like a row

What does your html look like?

i can remove readonly, the issue stays the same, unles it actually touches that 2nd input on events like pointerout, change, input it does not fire

When are you expecting input to fire?

it fires only when i change thevalue of 2nd input but i want to have them fired when the first input value is changed 2nd should fire automatically even when it does get any control

I don't think input works that way, when it's updated via js. I think you'd have to actual input something into the field directly to fire the input event. Otherwise, if you want an event to fire when you update the 2nd element via js, you have to call the function.

Here is a stackoverflow article that might help you with firing the change events on the other inputs if you programtically change them... https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically