How to assign 0 to hidden fields and reverse when shown?

So I'm trying assign 0 to some hidden dynamic text boxes, and perform the reverse i.e, clear the 0 when data is shown again.  The hiding and showing of these text boxes is controlled by a slider that is above those text fields.

$db = pg_connect("");
session_start();

<!-- ARRAY OF SCANNED DATA FROM THE PREVIOUS PAGE -->
$_SESSION['grid'] = $_REQUEST['grid'];
$grid = $_SESSION['grid'];

<!-- ARRAY OF SCANNED BARCODES ARE SEPARATED AND USED IN THE QUERY -->
$d = implode(',', $grid);
$sql = "select distinct size from items where main_group IN(select distinct 
main_group from items where addl_item_code_barcode IN ($d)) ORDER BY size";
$result = pg_query($db, $sql);
<!-- END -->

<!-- MASTER TEXT FIELD WHERE DATA ENTERED IS REFLECTED IN ALL TEXT FIELDS 
CREATED IN THE LOOP --> 
<input class="form-control" type="text" name="add0" id="add0" 
onkeyup="sync()">
<!-- END -->

<form action="add.php" method="GET">
<div class="row">
$counter = 1;
while ($res = pg_fetch_assoc($result)) {
?>

<!-- THIS ENTIRE DIV GETS SHOWN/HID WHEN THE SLIDER IS MOVED -->
<div class="col-md-2 show-hide">
<input type="text" value="<?php echo $res['size']; ?> " name="size[]" id= " 
<?php echo $res['size']; ?>" readonly style="background-color: #F5F5F5;" 
class="form-control" />

<!-- DYNAMIC TEXT FIELDS ARE DISPLAYED HERE -->
<div id="addition<?php echo $counter; ?>"> 
</div>
</div>
<!-- END OF DIV THAT GETS SHOWN/HID -->

<?php
$counter = $counter + 1;}
</div>
<button type="submit" value="submit">Apply</button>

<script>
$(document).ready(function () {
<!-- CODE TO ASSIGN DYNAMIC ID'S TO INPUT FIELDS -->
for (var i = 1; i < 9; i++)     
{
$('#addition' + i).append('<input class="form-control" type="text" 
name="add[]" id="add' + i + '" />');
}
}       


<!-- CODE FOR SLIDER -- >
$('#slider').slider({
min: 36,
max: 50,
step: 1,
values: [36, 50],
range: true,
slide: function (event, ui) {
$.each(ui.values, function (i, v) {
$('input.value').eq(i).val(v);
});
$('input.value').change(function () {
var $this = $(this);
$('#slider').slider('values', $this.attr('data-index'), 
$this.val());
});
<!-- END CODE FOR SLIDER --> 
 });
</script>

<!-- SCRIPT TO HIDE AND SHOW DATA -->
$('.show-hide').each(function (idx, div) {
var $div = $(div);
var value = $div.children().first().val();
if (value < ui.values[0] || value > ui.values[1]) {

<!-- TO ASSIGN 0 WHEN THE FIELDS -->
$div.find('input:nth-of-type(2)').val('0'); <-- I BELIEVE THIS IS WHERE THE PROBLEM IS->
$div.hide();
} 
else {
<!-- THE FIELD IS CLEARED-->
$div.find('input:nth-of-type(2)').val('');
$div.show();
}});
}});
<!-- END OF HIDE/SHOW SCRIPT -->  

The expected output is the hidden text field will be assigned zero, and will do the complete opposite when it's shown again.

This is how it looks like. https://ibb.co/t4TcV4S