Checklist of selected categories

On my blog I have a large number of categories >500, so I need to have some kind of checklist which categories are already selected to continue selecting.

For example, if we have cat1, cat2, cat3…cat50, and I selected cat3, cat5, cat7 and cat44, and need to select more of them, I need to have checklist what is already selected (something similar to tags, when you select tag, he is by automation checked and written below tag box).

I hope you understand what I am talking about.

So my question is – any kind of suggestion how to develop this (only suggestion, not whole code) or maybe there is some kind of plugin that I am not aware of?

Thank you

EDIT:

I need this in WordPress admin (add new post) screen

Here’s a script that you can enqueue into your admin panel. It will add a new tab to the category tabs called “Active”. Whenever a checkbox is checked, it gets added to the “Active” tab list, you can also click links in the “Active” tab list to remove them ( uncheck them ).

Add this as an external script, custom-tabs.js maybe:

jQuery( document ).ready( function( $ ) {

    /* Ensure that there are category metaboxes */
    if( $( 'ul.category-tabs' ).length ) {
        var taxonomies = [ 'category', 'tag' ]; /* Taxonomy Slugs ( category and tag are built-in ) */

        /* Loop through each category metabox and add a new tab */
        $.each( taxonomies, function( key, taxonomy ) {

            /* Add a checkbox listener */
            /* Whenever a checkbox is checked or unchecked, remove 'Active' tab list item */
            $( '#taxonomy-' + taxonomy + ' ul.categorychecklist input[type="checkbox"]' ).change( function() {
                var label   = $( this ).parent().text().trim();     /* Grab checkbox label */
                var value   = $( this ).val();                      /* Grab checkbox value */

                /* IF it is checked, add it to the 'Active' tab */
                if( $( this ).is( ':checked' ) ) {
                    $( '#' + taxonomy + '-active ul' ).append( '<li data-val="' + value + '"><a href="https://wordpress.stackexchange.com/questions/229698/javascript:void(0);"><span class="dashicons dashicons-no-alt" style="font-size:18px;text-decoration:none;margin-right:4px;"></span>' + label + '</a></li>' );

                /* IF it is unchecked, remove it from the 'Active' tab */
                } else {
                    $( '#' + taxonomy + '-active li[data-val="' + value +'"]' ).remove();
                }
            } );

            /* Add click listener to the newly added 'Active' tab links */
            $( 'div.inside' ).on( 'click', '#' + taxonomy + '-active a', function() {
                var value = $( this ).parent().attr( 'data-val' );

                /* Uncheck any values that have the clicked value */
                $( this ).parents( 'div.inside' ).find( 'input[value="' + value +'"]' ).prop( 'checked', false );

                /* Remove 'Active' tab link */
                $( this ).parent().remove();
            } );

            /* Append an 'Active' tab */
            $( '#' + taxonomy + '-tabs' ).append( '<li><a href="#' + taxonomy + '-active">Active</a></li>' );
            $parent = $( '#' + taxonomy + '-tabs' ).parents( 'div.inside' );

            /* Add the 'Active' tab panel and content - display none */
            $parent.find( 'div.tabs-panel:last' ).before( '<div id="' + taxonomy + '-active" class="tabs-panel" style="display: none;"><ul></ul></div>' );

            /* IF there are any checked values on load, trigger change. */
            $parent.find( '#' + taxonomy + '-all input:checked' ).each( function() {
                $( this ).trigger( 'change' );
            } );

        } );

    }

} );

Next we can enqueue it into our admin panel:

function load_custom_tabs_scripts() {
    wp_enqueue_script( 'custom_tabs', get_template_directory_uri() . '/scripts/custom-tabs.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_tabs_scripts' );

Let me know if you run into issues with it.