JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnClick">
Apply Bullet Point to Selected Text
</button>

<p id="text1" contenteditable="true">
Text
Text
</p>

<br>

<p id="text2" contenteditable="true">
Text
Text
</p>

CSS

.red{color:red;}

JavaScript

function getText() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.selection) { 
         return document.selection.createRange().text; 
     }
    return '';
}

$(document).ready(function () {
    $('#btnClick').click(function () {
   
    getText().anchorNode.parentNode.innerHTML = "\u2022" + getText();   
        
    });
});