Как я могу заставить 2 скрипта автозаполнения работать вместе

Question

Я хочу, чтобы два поля (id = "cost" и id = "deposit") отображали 2 отдельных значения на основе поля id = "size" в форме.

Были разработаны следующие сценарии автозаполнениядля достижения этой цели.Тем не менее, они, кажется, не работают вместе.Странно, но я удаляю AutoFillCost или AutoFillDepost, тогда другой будет работать сам по себе.

Но они не работают, когда вместе.Может кто-нибудь посоветовать, почему это происходит.Я предоставил соответствующий код ниже:

 <form action="send_form_email.php" method="post" name="contactform">
<table>
  <tbody>
<tr>
  <td>Group Size:</td>
  <td><input type="number" min="6" max="200" id="size"                 
onblur="autoFilldeposit();sizeValidate();" required><strong id="demo"></> 
</td>
<tr>
  <td>Deposit:</td>
  <td><input type="text" id="deposit"></td>
</tr>
<tr>
  <td>Total cost:</td>
  <td><input type="text" id="cost"></td>
</tr>



 <!--Total Cost auto populate-->

<script>

 function autoFillcost() { 
 var sizeb = document.getElementById("size").value;
 if (sizeb <= 25)
 document.getElementById("cost").value = "£200";
 else if (sizeb >= 26 && sizeb <= 50)
document.getElementById("cost").value = "£400";
else
document.getElementById("cost").value = "£600";
}

</script>


<!--Group Size/deposit fields and Validation Message-->

<script>

function autoFilldeposit() { 
var size = document.getElementById("size").value;
if (size <= 25)
document.getElementById("deposit").value = "£100";
else if (size >= 26 && size <= 50)
document.getElementById("deposit").value = "£200";
else
document.getElementById("deposit").value = "£300";
}

function sizeValidate() {
var size = document.getElementById("size");
if (!size.checkValidity()) {
    document.getElementById("demo").innerHTML = size.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "";
} 
} 
</script>