JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<button>Get Selected</button>
<div id="container">
    <div>
        <p class="selectable">fj g fjdhgdfkgd fj 1</p>
        <p class="selectable">fj g fjdhgdfkgd fj 2</p>
        <p class="selectable">fj g fjdhgdfkgd fj3</p>
    </div>
    <div>
        <p class="selectable">fj g fjdhgdfkgd fj 4</p>
        <p class="selectable">fj g fjdhgdfkgd fj 5</p>
        <p class="selectable">fj g fjdhgdfkgd fj 6</p>
    </div>
    <div>
        <p class="selectable">fj g fjdhgdfkgd fj 7</p>
        <p class="selectable">fj g fjdhgdfkgd fj 8</p>
        <p class="selectable">fj g fjdhgdfkgd fj 9</p>
    </div>
    <div>
        <p class="selectable">fj g fjdhgdfkgd fj 10</p>
        <p class="selectable">fj g fjdhgdfkgd fj 11</p>
        <p class="selectable">fj g fjdhgdfkgd fj 12</p>
    </div>
</div>

CSS

.selected {
    font-weight:bold;
}
* {
    user-select:none;
    -webkit-user-select:none;
}

JavaScript

$(document).ready(function () {
    $(document).on("click", ".selectable", function (e) {
        var elem = $(this);
        if (e.shiftKey) {
            elem.toggleClass("selected");
        }
    });
});