repeat selection breaks custom javascript code

I have a page where a user enters rows of data into a database using a web-form. The user has to enter a variable amount of data rows which is determined by a database value.

I have two alerts... One shows if they still need to enter a certain amount of data rows... and another if they have entered a sufficient amount. Because there needs to be a calculation to determine what alert is shown I have used a piece of javascript with data bindings to achieve this.

here is the code for the alerts and the javascript that performs the function.

<p id="incomplete" class="alert alert-warning incomplete">You need <span id="remaining"></span> more consenting leaseholders to qualify.</p>
<p id="qualify" class=" alert alert-success qualify"><i class="fas fa-thumbs-up fa-2x"></i>You have a sufficient amount of leaseholders to qualify for Right to Manage.</p>

<script>
var f = "<?php echo $row_rsCurrentUser['total_flats']; ?>";
var c = "<?php echo $row_rsCount['count']; ?>";
var r = Math.round(f / 2) - c;
var rq = f / 2;
document.getElementById("remaining").innerHTML = r;
document.getElementById("required").innerHTML = rq;
</script>
<script>
if (r <= 0)
{
$('#qualify').show();
}
if (r > 0)
{
$('#incomplete').show();
}

</script>

My problem is when I place a repeat selection to a form option field. It breaks the javascript and both the alerts show and the one which has a dynamic value in it is also not calculating.

I have other repeat selections on the page which don't effect it. Only when I add this particular repeat selection

I've attached the page if it helps. its possible you'll require remote access.

Thanks in advance