JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="edNew-body" class="apply-jHtmlArea" style="width:550px;height:250px;"></textarea>
<br />
<a href="#" id="ins">insert html</a>|<a href="#" id="rmv">remove html</a>

JavaScript

$('#ins').click(function(e){
    e.preventDefault();
    $("#edNew-body.apply-jHtmlArea").val('<p>something</p><audio src="whatever url" controls="controls" class="multimedia_666007" style="display: block; margin: 5px auto 10px; width: 320px; height: 35px; background-color: rgb(227, 227, 227);">-AUDIO-No support for HTML5</audio><p>after first audio</p><p>before second</p><audio src="whatever url" controls="controls" class="multimedia_666007" style="display: block; margin: 5px auto 10px; width: 320px; height: 35px; background-color: rgb(227, 227, 227);">-AUDIO-No support for HTML5</audio><p>last one</p>');


});

$('#rmv').click(function(e){
    e.preventDefault();
     dataId = '666007'; //comes from somewhere from system
     var $currentHtml = $($("#edNew-body.apply-jHtmlArea").val());
     $currentHtml.find('.multimedia_'+dataId).remove(); //get all but ignore elements with this class
     $("#edNew-body.apply-jHtmlArea").val($currentHtml.html()); //put Html back without elements
});