JSFiddle - React, Tailwind, and code Playground

HTML

<div>Insert more text within the box.
    <br>
</div>
<div><select id="place">
    <option value="">Before</option>
    <option value="true" selected>After</option>
    </select></div>

CSS

body {
    padding: 5px;
    border: 2px solid #000000;
}

JavaScript

var lyrRand = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    "Curabitur sollicitudin vitae diam faucibus hendrerit.",
    "Sed quis tellus in sapien ornare mattis id id quam",
    "Curabitur luctus leo et nisl feugiat, pellentesque volutpat est sagittis"];
$('body').on('click', 'div', function (ev) {
    ev.stopPropagation();
    addText(this, false);
});

$('body').on('click', function (ev) {
    addText(this, true);
});

$('#place').on('click', function(ev){
    ev.stopPropagation();
});

function addText(element, inside) {
    var lyr = lyrRand[Math.floor(Math.random() * lyrRand.length)];
    var divInsert = $('<div>' + lyr + '</div>');
    console.log($('#place').val());
    if ($('#place').val()) {
        if (inside) {
            divInsert.appendTo(element);
        } else {
            divInsert.insertAfter(element);
        }
    } else {
        if (inside) {
            divInsert.prependTo(element);
        } else {
            divInsert.insertBefore(element);
        }
    }
}