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();
    var dataId = '666007'; 

      // Put the markup in a new container
    var $currentHtml = $('<div>').append($("#edNew-body.apply-jHtmlArea").val());

      // .find() will now be able to search through all the markup you added
    $currentHtml.find('.multimedia_'+dataId).remove();

      // .html() will now give you back all the markup (though modified)
    $("#edNew-body.apply-jHtmlArea").val($currentHtml.html()); 
});