JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){

        $('#divClick').click(function(){
            $('#first').html('first');
        });

    });
</script>
</head>


<body>
<div id="first" />
<div id="second" >second div</div>
<hr/>
<div id="divClick">Click me.</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.
</body>
</html>