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 () {
   
    var selected = getText();
    if (selected.toString().length > 0) {
      if ($(selected.anchorNode.parentNode).attr('contenteditable')) {
        var bulletText = document.createTextNode(" \u2022 " + getText() );
        selected.getRangeAt(0).surroundContents(bulletText);
      }
    }
    selected.removeAllRanges();  
    });
});