Get Option from Select Jquery

Question

$('document').ready(function(){
    var catid, action, data, selectid;
    $('select.cat-selector').on('change', function() { 
        catid = $(this).val();
        action = 'getsubcatbyidList';
        data = { action: action, catid: catid };
        $('#input-catid').val(catid);
        // Sub Category
        getsubcat(catid,action,"");
    });
    $('select.sub-category').on('change', function() {
        $selectid = $(this).find('option:selected');
        var id = $selectid.val();
        $('#input-subcatid').val(selectid);
    });
});

And the Ajax Function getsubcat(catid,action,"");

function getsubcat(catid,action,selectid){
    var data = { action: action, catid: catid, selectid : selectid };
    $.ajax({
        type: "POST",
        url: ajaxurl+'?action='+action,
        data: data,
        success: function(result){
            if (result !== '') {
                $(".subcategory").html(result);
            }
        }
    });
    $('*[data-ajax-catid='+catid+']').addClass('link-active');
    $('button').prop('disabled', false);
}

And The HTML

<form method="post">
                                <div class="btn-section">
                                    <input type="text" id="input-catid" name="catid" value="">
                                    <input type="text" id="input-subcatid" name="subcatid" value="">
                                    <button type="submit" name="choose-category" id="next-btn" class="btn btn-primary text-caps" disabled>Proceed</button>
                                </div>
                            </form>

The Above code handle this task, Select the Category Using Cat ID, and also store in a hidden input tag, fetches the Sub Category and On selecting the Sub Category, It is supposed to get the Subcategory ID, but It doesn't work. How do I go about these Bug, Jquery Issue? Please I need your Help