How to create a custom jQuery plugin

The convenience of the jQuery plugin is that you can use the same code several times for different objects. In this case, copy-paste code is not needed. In addition, you can change the behavior of the plugin with different parameters. To write your jQuery plugin, you need to expand the $.fn object

In general, it looks like this:

$.fn.MyPlugin = function(){
    //plugin code
}

We write a plugin that will add a paragraph with the class "paragraph" after the selected object by clicking on it. By default we will set the red color of the text of our paragraph.

($ => {
    $.fn.myPlugin = function(options){
        let settings = $.extend({ //set default parameters
                color: 'red'
            }, options);
 
        //write the logic of our plugin
        $(this).on('click', function(){
 
            let par = '<p class="paragraph">An added paragraph</p>';
            $(this).after(par);
            $(this).next('.paragraph').css('color', settings.color);
 
        });
 
        return this; //for call chains
    }
})(jQuery);

The call for two different elements looks like this:

$(() => {
 
    $('.firstsel').myPlugin({
        color: 'green'
    });
     
    $('.secondsel').myPlugin();
     
});