how to send JS data via AJAX and post it on same screen as PHP

I am trying to get 3 sets of checkbox values from 3 checkbox menus. Note one checkbox menu has values generated using PHP/SQL. Also note that I have no <submit> button on purpose. I want those checkbox values as soon as the user checks them - not on a submit event.

Ultimately i want those sets of values to be in their own individual PHP variable each and I want them to be used on the same page. I have read that its best to use AJAX to convert those JS values into variables in PHP. And so I have built the following so far:

<form id="numberOrderForm" action="index.php" method="POST">
    <div class="wrappers" id="multi-select1Wrapper">
        <h2>Area Code</h2>
        <select class="dropDownMenus" id="multi-select1" name="multi_select1[]" multiple="multiple">
            <?php
                //The query asking from our database
                $areaCodeSQL = "SELECT ac.Number AS `AreaCode`, ac.Name AS `AreaName`
                                FROM `AreaCodes` ac";                                                               //SQL query: From the table 'AreaCodes' select 'Number' and put into 'AreaCode', select Name and put into 'AreaName'

                $areaCodeResults = $conn->query($areaCodeSQL);                                                      // put results of SQL query into this variable

                if ($areaCodeResults->num_rows > 0) {                                                               // if num_rows(from $results) is greater than 0, then do this:
                    // output data of each row
                                foreach($areaCodeResults as $areaCodeResult)                                        //for each item in $areCodeResults do this:
                                    {
                                        $areaNameAndCode =  $areaCodeResult['AreaCode'] ." ". $areaCodeResult['AreaName'];  //get AreaCode and AreaName from query result and concat them
                                        $areaName = $areaCodeResult['AreaName'];                                    // get AreaName
                                        $areaCode = $areaCodeResult['AreaCode'];                                    //get AreaCode

                                        ?><option class="menuoption1" name="menuAreaCode" value="<?php echo $areaCode ?>"  ><?php echo $areaNameAndCode; ?></option><?php  //Create this option element populated with query result variables
                                    }
                } 

            ?>
        </select>
    </div>       




    <div class="wrappers" id="multi-select2Wrapper">
        <h2>Number Type</h2>
        <select class="dropDownMenus" id="multi-select2" name="multi_select2[]" multiple="multiple">
            <option class="menuoption2" name="package" value="gold">Gold</option>
            <option class="menuoption2" name="package" value="silver">Silver</option>
            <option class="menuoption2" name="package" value="bronze">Bronze</option>
        </select>
    </div>

    <div class="wrappers" id="multi-select3Wrapper">
        <h2>Order</h2>
        <select class="dropDownMenus" id="multi-select3" name="multi_select3[]">
            <option class="menuoption3" value="sequential">Sequential</option>
            <option class="menuoption3" value="random">Random</option>
        </select>
    </div>  
 </form>

I then have my AJAX requests set up - one per checkbox menu, since ultimately I want 3 PHP variables. Each make an AJAX request and if successful shows a basic alert box containing those checkbox values within. And here they are:

<script>
    $(function(){
        $("#multi-select1").change(function(e){
            var areaCode = $("#multi-select1").val()
                $.post("index.php?areaCode="+areaCode, function(response){
                  alert(areaCode);
                });        
           });           


        $("#multi-select2").change(function(e){
            var numberType = $("#multi-select2").val()
                $.post("index.php?numberType="+numberType, function(response){
                  alert(numberType);
                });        
           });           


        $("#multi-select3").change(function(e){
            var order = $("#multi-select3").val()
                $.post("index.php?order="+order, function(response){
                  alert(order);
                });        
            });           
    });


</script>

So far so good. Those alert boxes contain the right values. My console also is ...index.php?areaCode=*value,value* upon making the POST request so that seems in order too. And so I'd imagine I would be able to echo out values that have been POSTED like this:

<div>
    <?php
        if(isset($_POST['areaCode'])){
                $ac = $_POST['areaCode'];

                foreach($ac as $value){
                        echo $value;    
                }
        }
    ?>
</div>

But nothing happens. Can anyone help?