JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" />
<div id="second" >second div</div>
<hr/>
<div id="click1">Click me for jQuery version.</div>
<div id="click2">Click me for DOM version.</div>
<br/>
Clicking will append html to the first div. Everything below it disappears.
    <br/>
    When ...
    <br/>
    &lt;div id="first" /&gt;
    <br/>
    ... is changed to ...
    <br/>
    &lt;div id="first" &gt;&lt;/div&gt;
    <br/>
    ... it works as expected.

JavaScript

$('#click1').click(function(){
    $('#first').html('first');
});
$('#click2').click(function(){
    document.getElementById("first").innerHTML = "first";
});