I'm trying to set 100% in total on three input fields. So the idea is when the user sets 30 in one field, in the other two automatically to split numbers up to 100. So in the second field needs to be 35 and in the third one 35. Also, if any number is changed after that, the other two will be adjusted accordingly.

The number in any of those three fields can't exceed 100. I think you are getting the idea of what I'm trying to achieve.

Here is what I have tried so far (I'm not so experienced in JavaScript, but I know that this is a bad approach): HTML:

<input class="pp-w-100 pp-range-numbers pp-first-field" type="number" name="pp-age-old-2030">
<input class="pp-w-100 pp-range-numbers pp-second-field" type="number" name="pp-age-old-3040">
<input class="pp-w-100 pp-range-numbers pp-third-field" type="number" name="pp-age-old-4050">

JS:

const firstField = document.querySelector('.pp-first-field');
const secondField = document.querySelector('.pp-second-field');
const thirdField = document.querySelector('.pp-third-field');
const totalPercentage = 100;

firstField.addEventListener('change', () => {
    let intValue = parseInt(firstField.value);
    if (intValue < totalPercentage) {
        let getFirstValue = totalPercentage - intValue;
        secondField.value = getFirstValue / 2;
        thirdField.value = getFirstValue / 2;
    }
});

secondField.addEventListener('change', () => {
    let intValue = parseInt(firstField.value) + parseInt(secondField.value);
    if (intValue < totalPercentage) {
        thirdField.value = totalPercentage - intValue;
    }
});

The code above is not working as expected.

Thank you.