JSFiddle - React, Tailwind, and code Playground

by pankus

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<p>
	<span id="1">My</span>
	<span id="2">Name</span>
	<span id="3">Is</span>
	<span id="4">Jon</span>
	<span id="5">Snow</span>
	<span id="6">And</span>
	<span id="7">I</span>
	<span id="8">Know</span>
	<span id="9">Nothing</span>
</p>
<p>
	<span id="11">My</span>
	<span id="12">Name</span>
	<span id="13">Is</span>
	<span id="14">Jon</span>
	<span id="15">Snow</span>
	<span id="16">And</span>
	<span id="17">I</span>
	<span id="18">Know</span>
	<span id="19">Nothing</span>
</p>
<p id="word_list_container">
</p>

CSS

.word_selected {
background-color: lightsteelblue;
border-bottom: 2px solid indigo;
}

p {
user-select: none;
cursor: default;
}

JavaScript

$(document).ready(function() {
    var word_list = [];
    var add_mousemove_event = true;
    $(document).on("mousedown", "p > span", function() {
        if ($(this).hasClass("word_selected")) {
            $(this).removeClass("word_selected");
            remove_word_from_array($(this).attr("id"));
        } else {
            event_callback.call($(this));
        }
    }).on("mouseup", "p > span", function() {
        $(document).off("mousemove", "p > span", event_callback);
        add_mousemove_event = true;
    });

    function remove_word_from_array(word_id) {
        for (let i = 0; i < word_list.length; i++) {
            if (word_list[i]["word_id"] === word_id) {
                word_list.splice(i, 1);
                break;
            }
        }
        show_selected_word_ids();
    }

    function event_callback() {
        exec($(this));
    }

    function exec(elem) {
        if (add_mousemove_event === true) {
            $(document).on("mousemove", "p > span", event_callback);
            add_mousemove_event = false;
        }
        select_words.call(elem);
    }

    function select_words() {
        if (!$(this).hasClass("word_selected")) {
            word_list.push({
                "word_id": $(this).attr("id"),
                "word_text": $(this).text()
            });
            $(this).addClass("word_selected");
            show_selected_word_ids();
        }
    }

    function show_selected_word_ids() {
        var word_list_container = $("#word_list_container");
        word_list_container.html("");
        for (let i = 0; i < word_list.length; i++) {
            word_list_container.append(word_list[i]["word_id"] + (i !== word_list.length - 1 ? "," : ""));
        }
    }
});