selecting subcategories based on categories in php using ajax error

i have a form where a user can select categories which are checkboxes and when they select category, respective sub categories will display, while adding data this is working fine, now i am editing the data, so i did the following code:

$(document).on('click','.country',function(){
var cat_id = [];
var opt_html = '';
$('input[name="user_category[]"]:checked').each(function(){
    cat_id.push($(this).val());
});
if(cat_id.length > 0){
    jQuery.ajax({
        url: "<?php echo base_url('/homecontroller/getSubcategories');?>",
        data:{'cat_id':cat_id},
        type: "POST",
        success:function(data){
            var response = JSON.parse(data);
    console.log(response);
            if(response.length > 0){
                $.each(response, function(i,l){
                    opt_html += '<div class="form-group col-md-3"><input type="checkbox" class="service_subcat " name="user_subcategory[]"  value="'+l+'"> <label style="font-weight:normal" class="checkbox-inline">'+l+'</label></div>';
                });
                $('#state').html(opt_html);    
                // $('#sub_cat').attr('required','true');
            }
            else{
                $('#state').html('');
                $('#state').removeAttr('required');
            }
        }
    });    
}else{
    $('#state').html('');
    $('#state').removeAttr('required');
}
})

<div class="form-group col-md-12">
                            <label  style="font-size:large">Serviceable Category:</label>
                            <div class="row" >
                            <?php foreach ($listcategory as $liz){ ?>

                              <?php $HiddenProducts2 = explode(',',$val->scategory);?> 
                              <div class="form-group col-md-3">
                              
                            <input type="checkbox" name="user_category[]"  value="<?=$liz->id?>" class="country"  id="country" <?php if(in_array($liz->id, $HiddenProducts2)) { echo 'checked'; }?>>
                            <label style="font-weight:normal" ><?=$liz->name?></label>  
                          </div>
                         <?php } ?>
                            </div>
                          </div>

                          <div class="form-group col-md-12">
                            <label  style="font-size:large">Serviceable Sub Category:</label>
                            <div class="row" id="state">

                            <?php $HiddenProducts3 = explode(',',$val->ssubcategory);?>
                            <?php if($val->ssubcategory){?> 
                              <?php foreach($HiddenProducts3 as $hi){?>
                            <div class="form-group col-md-3"><input type="checkbox"  name="user_subcategory[]"  value="<?=$hi?>" checked> 
                            <label style="font-weight:normal" class="checkbox-inline">
                            <?=$hi?>
                          </label>
                        </div>
                        <?php } } ?>
                        
                            </div>
                          </div>

now the issue is there is some glitch while selecting any category in edit, all the existing subcategories dissapears, can anyone please tell me how to fix this, thanks in advance