input value change in real time, Natvie JS

Question

I have 2 input with the class name .ValueNextYear who must have always the same value. The probleme is that, it don't have the same value in real time.

When I edit the first .ValueNextYear input who have 150 in value the second input ValueNextYear must have the same value but is not. If I enter 15000 in the first input ValueNextYear the second contain 1500.

Also for calculate the value of #EstimateAmountReceived input I need to have a real value in .ValueNextYear for have a good result.

(Look on NextYear() function)

Any help is welcome. Sorry for my bad english

Link with code

var AmountNextYear = (value1, value2) => {
	if (value1 >= 1 && value1 < 20) {
		return value2 += 10;
	} else if (value1 >= 20 && value1 < 50) {
		return value2 += 20;
	} else if (value1 >= 50 && value1 < 80) {
		return value2 += 30;
	} else if (value1 >= 80 && value1 < 100) {
		return value2 += 40;
	} else if (value1 >= 100 && value1 < 150) {
		return value2 += 50;
	} else if (value1 >= 150 && value1 < 300) {
		return value2 += 60;
	} else {
		return value2;
	}
};
var RealPaid = (value) => {
	let RealPaidValue = value - value * 66 / 100;
	return parseFloat(RealPaidValue).toFixed(2);
};
var TaxDeduction = (value) => {
	let TaxDeductionValue = value * 66 / 100;
	return parseFloat(TaxDeductionValue).toFixed(2);
};
var DownPayment = (value) => {
	let DownPayment = value * 60 / 100;
	return parseFloat(DownPayment).toFixed(2);
};
var DownPaymentInCompToLastYear = (value1, value2) => {
	let DownPaymentInCompToLastYear = value1 * 66 / 100 - value2;
	return parseFloat(DownPaymentInCompToLastYear).toFixed(2);
};
var checkSiEstIdentique = (ValueNextYear) => {
	if (ValueNextYear != document.querySelectorAll(".ValueNextYear").value) {
		return ValueNextYear = document.querySelectorAll(".ValueNextYear").value;
	}
};
var main = () => {
	var valueDonation = document.getElementById("valeurDon").value.replace(",", ".");
	document.getElementById("Deduction").value = TaxDeduction(valueDonation).replace(".", ",");
	var PostValueDonation = Math.ceil(valueDonation / 5) * 5;
	for (var i = document.querySelectorAll(".ValueNextYear").length - 1; i >= 0; i--) {
		document.querySelectorAll(".ValueNextYear")[i].value = AmountNextYear(valueDonation, PostValueDonation);
	}
	var ValueNextYear = AmountNextYear(valueDonation, PostValueDonation);
	checkSiEstIdentique(document.querySelectorAll(".ValueNextYear")[0].value);
	document.getElementById("DownPayment").value = DownPayment(TaxDeduction(valueDonation)).replace(".", ",");
	var DownPay = DownPayment(TaxDeduction(valueDonation));
	document.getElementById("EstimateAmountReceived").value = DownPaymentInCompToLastYear(ValueNextYear, DownPay).replace(".", ",");
	document.getElementById("formGroupExampleInput").value = TaxDeduction(ValueNextYear).replace(".", ",");
	document.getElementById("RealPaidValue").value = RealPaid(ValueNextYear).replace(".", ",");
	document.querySelectorAll(".ValueNextYear")[0].addEventListener("keydown", function (event) {
		NextYear(DownPay);
	});
};
var NextYear = (DownPay) => {
	console.log("ValueNextYear", document.querySelectorAll(".ValueNextYear")[0].value);
	document.querySelectorAll(".ValueNextYear")[1].value = document.querySelectorAll(".ValueNextYear")[0].value;
	console.log("EstimateAmountReceived", document.getElementById("EstimateAmountReceived").value);
	// document.getElementById("EstimateAmountReceived").value = DownPaymentInCompToLastYear(document.querySelectorAll(".ValueNextYear")[0].value, DownPay )
};
document.addEventListener("DOMContentLoaded", function (event) {
	main()
});

<div style="width: 80%; margin: auto;">
  <form>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">En 2017, vous avez donné :</label>
      <input type="text" class="" id="valeurDon" onkeyup="main()" value="100">
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Votre déduction fiscale sur votre don 2017</label>
      <input type="text" id="Deduction" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Pour un don 2018 de :</label>
      <input type="text" class="ValueNextYear">
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Vous recevrez un acompte des impôts en janvier 2019 de :</label>
      <input type="text" id="DownPayment" disabled>
    </div>

    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Vous percevrez en juillet 2019 un solde de :</label>
      <input type="text" id="EstimateAmountReceived" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Montant du don que vous souhaitez effectuer en 2018</label>
      <input type="text" class="ValueNextYear" disabled>
    </div>

    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput2">Montant total de votre déduction fiscale 2018</label>
      <input type="text" id="formGroupExampleInput" disabled>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <label for="formGroupExampleInput">Coût réel de vos dons 2018</label>
      <input type="text" id="RealPaidValue" disabled>
    </div>

  </form>
</div>

Answer 1

As pointed by @enxaneta if I change keydown event by input event it works.

document.querySelectorAll(".ValueNextYear")[0].addEventListener('input', function(event){
    NextYear(DownPay)
} );

And as pointed by @KENZiE it works too if I replace keydown event by keyup event.

document.querySelectorAll(".ValueNextYear")[0].addEventListener('keyup', function(event){
    NextYear(DownPay)
} );