JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li class="afterthis">3</li>
    <li>4</li>    
    <li>5</li>    
</ul>
<br />
<div id="test"></div>

CSS

ul { list-style: disc; margin-left:20px; }
li { padding-left:10px; }

JavaScript

$(document).ready(function() {
    $(".afterthis").after("</ul><h1>Title</h1><ul>");
    
    $("#test").append("title</div><div>content");
});

/* Why does the output have the first end tag at the end??? see source from output,

i need the output to be like:
<ul>
    <li>1</li>
    <li>2</li>
    <li class="afterthis">3</li>
</ul
<h1>Title</h1>
<ul>
    <li>4</li>    
    <li>5</li>    
</ul>

but it does
<ul>
    <li>1</li>
    <li>2</li>
    <li class="afterthis">3</li>
    <h1>Title</h1>
    <ul></ul
    <li>4</li>    
    <li>5</li>    
</ul>
*/