ajax object array 502 error after submitting data

I have a multi checkbox and it has a string in each input value, now when I click the filter after selecting the checkbox it gives me 502 error.

if I pass a static string in ajax like regionsort:'canada, Germany' it works but when I dynamically pass after checking the checkbox it goes to 502..

<div class="form-check">   
<input type="checkbox" id="cn0" value="canada">  
<input type="checkbox" id="cn1" value="germany">  
 </div>  
<button class="btn btn-secondary finalfilter bottomfilterbuuton">Apply Filter</button>

jQuery('.country input[type=checkbox]').change(function(){ 

                var clickBtnValue = [];
                var dataval = "";
                $('.country input[type=checkbox]:checked').each(function(i){
                   clickBtnValue[i] = $(this).val();
                  

                });

           
                $.ajax({
                url: '<?php echo bloginfo('template_url')?>/coursefilter/filter.php', 
                data: {'regionsort': clickBtnValue},
                type: 'post',
                success: function(result) {
                  
                
                    
                }
                });
    

           });


 jQuery('.finalfilter').click(function(){
         window.location.href='<?php echo site_url('my-page');?>';

});