JSFiddle - React, Tailwind, and code Playground

HTML

<div id="plugin-container">test</div>

<hr/>

<a id="get-selection">Get selection</a>

CSS

#plugin-container
{
    width:100%;
    height:100px;
    border-color:red;
}

JavaScript

(function ($) {
    $.fn.myPlugin = function (action) {
        if (action == null) action = "initialize";

        return this.each(function ($this) {
            $this = $(this);

            if (action == "initialize") {
                $this.html('<div></div>');
                var div = $("div", $this);

                div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>');

                div.children("a").each(function (i) {
                    $(this).click(function (event) {
                        // Here I store the index.
                        $this.data("selectedValue",$(this).index());
                        event.preventDefault();
                        return false;
                    });
                });

                return $this;
            } else if (action == "getSelection") {
                // With this action, I tried to get the stored value.
               return $this.data("selectedValue");
            }
        });
    };
})(jQuery);


$('#plugin-container').myPlugin();

$('#get-selection').click(function(){
   alert($('#plugin-container').data("selectedValue"))
});