filter highlighted dates using ajax onchange of select tag

[Trushar10]

I have used jQuery datepicker to highlight the date with value > 0. It shows all dates that have value > 0. I want to highlight only those dates which have items selected in the select tag.

for example, if I choose item 1 then it will highlight only those dates where item1 has a value greater than 0.

So I tried to create an onchange event on select tag and call ajax to replace the script. But after some digging on internet I found that once the script is executed it can not be replaced.

is there any way to fetch only dates on the selected item?

HTML

<select id="item" name="item" onchange="date()">
<option value="All">All</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
</select>

<input type="text" id="start" name="start" autocomplete="off">

<script>
    $(function() {
        // An array of dates
        var eventDates = {};
        <?php

        $sql = "SELECT * from `ut_trips` WHERE `deisel` > 0";

        $result = $connect->query($sql);   

        while( $final=$result->fetch_assoc() ) 
        {

        ?>
        eventDates[new Date('<?php 
        $orgDate = date($final['date']);
        $date = str_replace('-"', '/', $orgDate);  
        $newDate = date("Y/m/d", strtotime($date));  
        echo $newDate   ?>')] = new Date(
            '<?php $orgDate =date($final['date']); 
             $date = str_replace('-"', '/', $orgDate);  
             $newDate = date("Y/m/d", strtotime($date));  
             echo $newDate  
             ?>'
        );

        <?php
        
        }

        ?>

        // datepicker
        $('#start').datepicker({

            dateFormat: "yy-mm-dd",

            beforeShowDay: function(date) {
                var highlight = eventDates[date];
                if (highlight) {
                    return [true, "event", 'Tooltip text'];
                } else {
                    return [true, '', ''];
                }
            }
        });
    });
</script>

ajax file

function item(str) {
	if (str == '') {
		document.getElementById('start').innerHTML = '';
		return;
	}
	const xhttp = new XMLHttpRequest();
	xhttp.onload = function () {
		document.getElementById('start').innerHTML = this.responseText;
	};
	xhttp.open('GET', 'item.php?q=' + str);
	xhttp.send();
}

item.js file

<?php

echo include('js.php');

?>

js.php file

<script>
$(function() {
    $q = $_GET['q']
    // An array of dates
    var eventDates = {};
    <?php

    $sql = "SELECT * from `ut_trips` WHERE `deisel` > 0 AND `vehicle` = '".$q."'";

    $result = $connect->query($sql);   

    while( $final=$result->fetch_assoc() ) 
    {

    ?>
    eventDates[new Date('<?php 
    $orgDate = date($final['date']);
    $date = str_replace('-"', '/', $orgDate);  
    $newDate = date("Y/m/d", strtotime($date));  
    echo $newDate   ?>')] = new Date(
        '<?php $orgDate =date($final['date']); 
         $date = str_replace('-"', '/', $orgDate);  
         $newDate = date("Y/m/d", strtotime($date));  
         echo $newDate  
         ?>'
    );

    <?php
    
    }

    ?>

    // datepicker
    $('#start').datepicker({

        dateFormat: "yy-mm-dd",

        beforeShowDay: function(date) {
            var highlight = eventDates[date];
            if (highlight) {
                return [true, "event", 'Tooltip text'];
            } else {
                return [true, '', ''];
            }
        }
    });
});
</script>