Данные формы Textarea не заменяются при отправке

Question

Я пытаюсь заменить новые строки разрывами строк при отправке формы с текстовыми данными.

следующие работы:

$("form").on('submit', function (e) { 
    $(".description").html($(".description").val().replace(/\r\n|\r|\n/g, "<br />")); 
}); 

Только тогда, когда я не изменить значение текстового поля.

Чтобы уточнить, это перестает работать, когда я редактирую текст в текстовом поле. Единственный способ заставить его работать с вновь введенным текстом - отправить форму, снова щелкнуть правой кнопкой мыши и повторно отправить форму без внесения каких-либо изменений в текст в текстовом поле. Может кто-нибудь объяснить, почему такое поведение происходит, пожалуйста?

HTML:

<textarea class="form__item__input description" name="description"></textarea> 

Answer 1

$("form").on('submit', function(e) { 
 
    e.preventDefault(); 
 
    
 
    $(".description").val($(".description").val().replace(/\r\n|\r|\n/g,"<br />")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form> 
 

 
    <textarea class="description" rows="10"> 
 
    Hi 
 
    Click 
 
    me 
 
    please 
 
    </textarea> 
 
    <input type="submit" value="submit" /> 
 
</form>