Send two jquery variables via ajax in PHP script

See more:

Javascript

PHP

jQuery

I have a jquery script with two range sliders. The values get send via Ajax in my php_file.php:

html_file.php

<script>
    $( function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 1,
            max: 25,
            value: 1,
            slide: function(event, ui) {
                $("#amount").val(ui.value);
                /* Here we send the slider value towards PHP */
                $.ajax({
                    method: "POST",
                    url: "php_file.php",
                    data: { sliderVal: ui.value }
                })
                /* Here we receive the data back */
                .done(function(data) {
                    /* Here you can do whatever you want with the data */
                   $("#content").html(data);
                });
            }
        });
        $( "#amount" ).val( $("#slider-range-max").slider("value") );
    });
    $( function() {
        $( "#slider-range-max2" ).slider({
            range: "max",
            min: 1,
            max: 4,
            value: 1,
            slide: function(event, ui) {
                $("#amount2").val(ui.value);
                /* Here we send the slider value towards PHP */
                $.ajax({
                    method: "POST",
                    url: "php_file.php",
                    data: { sliderVal2: ui.value }
                })
                /* Here we receive the data back */
                .done(function(data2) {
                    /* Here you can do whatever you want with the data */
    
                    $("#content").html(data2);
                });
            }
        });
        $( "#amount2" ).val( $("#slider-range-max2").slider("value2") );
    });

</script>



<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div>

php_file.php

<?php    
    $str = $_POST['sliderVal'];
    $quality = $_POST['sliderVal2'];
    
    $str2 = file_get_contents('https://eu.api.battle.net/wow/pet/stats/258?level='. $str .'&breedId=5&qualityId='. $quality .'&locale=de_DE');
    
    $json = json_decode($str2, true); // decode the JSON into an associative array
    
    $n= $json['health'];
    
    echo '<div class="profile-font2">', $n, '</div>';
    ?>

The Problem

Now I have two sliders which changes their values indepently from each other. Here the screenshot to understand it better. If I change the second slider (quality) the values of the first slider (level) disappeears. They should be both respected. So in this case of the screenshot there should be the level=6
and the quality=2.

How can I fix that?

Screenshot

[1]: https://i.stack.imgur.com/VZVIx.png

What I have tried:

I gave the

data: { sliderVal2: ui.value }

another name but then the script doesn´t work anymore.