createElement (“span”) is cleared when adding text

Friends, there is such a user interface.

<textarea> - there the user enters the text that is displayed in the <div class="text">

<select id="part"> - text color partially - allows the user to <select id="part"> part of the text <div class="text"> and set the color - the createElement("span") method

However, if the user makes changes to the textarea, createElement("span") reset, from the user's point of view - the color of the entire text becomes black again (by default)

What can be done to save createElement("span")

Thank you in advance.

 $("#part").change(function () { var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange(); if (selectedText.getRangeAt) { var range = selectedText.getRangeAt(0); var newNode = document.createElement("span"); if ($(this).val() == 1) { newNode.setAttribute('class', 'highlightedTextRed'); } else if ($(this).val() == 2) { newNode.setAttribute('class', 'highlightedTextBlue');} else { newNode.setAttribute('class', 'highlightedTextWhite');} range.surroundContents(newNode); } });