how can i unload and clear interval function, when the dropdown option unselected?

I have an option in my HTML file like this

 <select class="div-toggle" data-target=".my-info-1">
                <option value="Batt-1" data-show=".Batt-1">Batt-1</option>
                <option value="Batt-2" data-show=".Batt-2">Batt-2</option>
                <option value="Batt-3" data-show=".Batt-3">Batt-3</option>
</select>

and when selecting an option, I run a jquery to show a div and run a function to load a PHP file. this is the Jquery code

  $(document).on('change', '.div-toggle', function() {
            var target = $(this).data('target');
            var show = $("option:selected", this).data('show');
            if (show == ".Batt-1") {
                var refreshId = setInterval(function() {
                    $('#responsecontainer').load('./utils/data.php');
                }, 1000);
            }
            if (show == ".Batt-2") {
                var refreshId = setInterval(function() {
                    $('#responsecontainer2').load('./utils/data-2.php');
                }, 1000);
            }
            $(target).children().addClass('hide');
            $(show).removeClass('hide');
        });
        $(document).ready(function() {
            $('.div-toggle').trigger('change');
        });

so, my question is, how can I stop the interval and unload the PHP docs when I change the selected option?