Проблема

HTML

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body >

<button id="bold">Жирный</button><br>
                   
<label>Введите сообщение:</label><br>
<textarea id="text_textarea" class="form-control" rows="9"></textarea><br>
<label>Вид сообщения:</label><br>
<span id="text_phone_sms" class="p-1" style="font-size: 0.9em;">Введите текст сообщения...</span>
                         
</body>

</html>

JavaScript

$('#bold').click(function(){
    if ($('#text_textarea')[0].selectionStart == $('#text_textarea')[0].selectionEnd) {
      return; // ничего не выделено
    }
  
    let selected = $('#text_textarea')[0].value.slice($('#text_textarea')[0].selectionStart, $('#text_textarea')[0].selectionEnd);
    $('#text_textarea')[0].setRangeText(`**${selected}**`);
    document.getElementById("text_phone_sms").innerHTML = '<b>' + selected + '<b>'
});
document.getElementById("text_textarea").oninput = function (e) {
    document.getElementById("text_phone_sms").innerHTML = e.target.value;
};