Dropdown onchange using ajax

Question

My form has a dropdown that I used to filter the input. I am filtering the data based on the chosen list using the ajax onchange function.

My dropdown appeared to be like this:

<select id="opt_level" name="opt_level">
    <option value="level1">Level 1</option>
    <option value="level2">Level 2</option>
    <option value="level3">Level 3</option>
</select>

And here is the div that I wanted to display the onchange data :

<div id="opt_lesson_list">
    <!-- Some statement here -->
</div>

When there is onchange on the dropdown, it will go through this ajax function :

jQuery(document).ready(function($) {
    $("#opt_level").on('change', function() {
        var level = $(this).val();
        if(level){
            $.ajax ({
                type: 'POST',
                url: 'example-domain.com',
                data: { hps_level: '' + level + '' },
                success : function(htmlresponse) {
                    $('#opt_lesson_list').html(htmlresponse);
                    console.log(htmlresponse);
                }
            });
        }
    });
});

And going to the URL example-domain.com to check if there is a post made from ajax :

if(isset($_POST['hps_level'])){
    // Statement to select from database
}

Therefore, data inside the div id="opt lesson list">/div> should display the filtered data after filtering is complete. But instead, the entire page received an ajax response, which implies that my entire form is multiplying and being displayed in the div I was using to show onchange data.