Add unlimited sidebar in WordPress

custom-sidebar.css

.sidebar-info {
    padding: 0 8px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    max-width: 300px;
    display: none;
}

.sidebar-info.show {
    display: block;
}

.sidebar-info label {
    font-weight: bold;
    clear: both;
}

.sidebar-info input {
    width: 100%;
}

.sidebar-add-actions {
    line-height: 100%;
    padding: 10px 0 12px;
}

.sidebar-add-actions button:not(:last-child) {
    margin-right: 5px;
}

.custom-sidebars-column {
    max-width: 300px;
}

.custom-sidebars-column label,
.custom-sidebars-column input {
    width: 100%;
}

.custom-sidebars-column .widgets-holder-wrap {
    margin: 10px 0 0;
}

.custom-sidebars-column .sidebar-name-edit,
.custom-sidebars-column .sidebar-description,
.custom-sidebars-column .sidebar-add-actions {
    display: block;
    padding-left: 8px;
    padding-right: 8px;
}

.custom-sidebars-column .closed .sidebar-name-edit,
.custom-sidebars-column .closed .sidebar-description,
.custom-sidebars-column .closed .sidebar-add-actions {
    display: none;
}

custom-sidebar.js

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

        var wrapper     = $('.wrap > h1'),
            btn         = wrapper.append('<a href="javascript:void(0);" class="page-title-action add-sidebar-btn">Add New Sidebar</a>');
            form        = $('<div class="sidebar-info"><p><label>Sidebar Name</label><input type="text" name="sidebar-name" id="sidebar-name" val="" /></p><p><label>Sidebar Description</label><input type="text" name="sidebar-desc" id="sidebar-desc" val="" /></p><div class="sidebar-add-actions"><button class="button-secondary cancel-button">Cancel</button><button class="button-primary save-button">Add Sidebar</button></div><div class="result"></div></div>'),
            cancel_btn  = form.find('.cancel-button'),
            save_btn    = form.find('.save-button'),
            result      = form.find('.result');

            form.insertAfter(btn);

            $('.add-sidebar-btn').on( 'click', function() {
                $('.sidebar-info').toggleClass('show');
            });
            cancel_btn.on( 'click', function() {
                $('.sidebar-info').removeClass('show');
            });

            save_btn.on( 'click', function() {
                $('.sidebar-add-actions').hide();
                result.html('Loading...');
                form.find('input').attr('disabled', '');
                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        action: 'pfun_add_sidebar',
                        name: $('#sidebar-name').val(),
                        desc: $('#sidebar-desc').val(),
                    },
                    success: function(data) {
                        result.html(data.message);

                        if ( data.error == false ) {
                            window.location.reload(true);
                        } else {
                            $('.sidebar-add-actions').show();
                            form.find('input').removeAttr('disabled');
                        }
                    }
                });
            });

            return;
    });

})(jQuery);

custom-sidebar.php

<?php
/**
 * Registers a widget area.
 *
 * @link https://developer.wordpress.org/reference/functions/register_sidebar/
 *
 * @since Pfun 1.0
 */
function pfun_widgets_init() {
	$custom_sidebars = get_option( 'pfun_sidebars', array() );
	foreach ( $custom_sidebars as $sidebar ) {
      	if ( empty( $sidebar ) ) continue;
        register_sidebar( array(
			'name'          => $sidebar['name'],
			'id'            => $sidebar['id'],
			'description'   => $sidebar['description'],
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		) );
    }
}
add_action( 'widgets_init', 'pfun_widgets_init' );

/**
 * Custom sidebars in admin
 */
add_action( 'admin_print_scripts', 'pfun_admin_print_scripts' );
function pfun_admin_print_scripts( $arg ){
	global $pagenow;
	if ( is_admin() && ( $pagenow == 'widgets.php' ) ) {
		wp_enqueue_script( 'custom-sidebar', get_template_directory_uri() . '/js/custom-sidebar.js', array('jquery') );
		wp_enqueue_style( 'custom-sidebar', get_template_directory_uri() . '/css/custom-sidebar.css' );
	}
}

/**
 * Ajax handler for adding custom sidebar
 */
add_action( 'wp_ajax_pfun_add_sidebar', 'pfun_add_sidebar' );
function pfun_add_sidebar() {
	$data = array();

	if ( ! current_user_can( 'manage_options' ) ) return;

	$mysidebars = get_option( 'pfun_sidebars', array() );

	$name = sanitize_title( $_POST['name'] );
	$desc = sanitize_text_field( $_POST['desc'] );

	if ( ! $name || ! $desc ) {
		$data['error'] = true;
		$data['message'] = __( 'Please fill in all fields.', 'pfun' );
	} else {
		$mysidebars[$name] = array(
			'name' 			=> $_POST['name'],
			'id'   			=> $name,
			'description' 	=> $desc,
		);
		update_option( 'pfun_sidebars', $mysidebars );
		$data['error'] = false;
		$data['message'] = __( 'Sidebar is added, now reloading page...', 'pfun' );
	}

	echo json_encode( $data );

	die();
}