I am trying to replicate how stack overflow allows the user to type text and produces it below at the same time. The code below in the Django Template works for this.

{% block head %}
<script>
function LiveTextUpdate() {
  var x = document.getElementById("myInput").value;
  document.getElementById("test").innerHTML = x;
}

</script>
{% endblock %}

{% block body %}

<div class = typing_container>
    <div class = note_text>
        {{ note_form.note }}
    </div>
</div>

<div class = output_container>
    <div class = output_note_text>
        <p id="test" ></p>
    </div>
</div>

The following is in the forms.py file:

class NoteForm(ModelForm):
    class Meta:
        model = NoteModel
        fields = [
            'note'
            ]
        widgets = {
            'note' : Textarea(attrs={'placeholder' : 'Start a new note', 'class' : 'updated_task_commentary', 'id' : 'myInput', 'oninput' : 'LiveTextUpdate()' }),
        }

How can I replicate the ability to bold text when the text is surrounded by "**" please?