JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Table of contents viewer</h1>
<p>Enter HTML below and view your text in the box to the right.</p>

<textarea id="source" cols="100" rows="18"></textarea>

<div id="toc">Your table of contents will appear here.</div>

<!-- You can use this HTML to test it:

<h2>This is a header</h2>
<p>This is a paragraph, and it should be hidden.</p>
<div> This is a div, and it should be hidden.</div>
<hr>
<h3>This is another header</h3>
<p>This is another paragraph.</p>
<h4>This is another header</h4>

-->

CSS

body {
    font-family: Georgia;
    color: #444;
    background: #eee;
    margin: 10px;
}

h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #069; display: block !important;}

textarea {
    font-size: 9px;
    float: left;
    width: 40%;
}
div#toc
{
  display:none;   
}

#toc {
    width: 45%;
    float: right;
    background: #ddd;
    min-height: 200px;
    border: 3px solid #fff;
    padding: 20px;
    font-size: .8em;
}


#submit {
    font-size: 2em;
    border: 2px solid #888;
    padding: .5em;
    display: block;
}

JavaScript

// selector for the source textarea
var source = $('textarea#source');
// selector for the destination
var destination = $('#toc');

source.keyup(function() {

    destination.html( source.val() );

});

// now hide everything in #toc except h1,h2,h3,h4,h5,h6
// How do I do this?