JSFiddle - React, Tailwind, and code Playground
HTML
<label class="show_label">
<input type="checkbox" class="show" value="headertitle" name="1" />Click Me!</label>
<div id="headertitle" class="msg_icon">Header Title
<br>
<input type="text" name="header1" value="" />
<br>Header Line 1
<br>
<textarea name="header2" /></textarea>
<br>Header Line 2
<br>
<input type="text" name="header3" value="" />
<br>
</div>
<br>
<br>
<label class="show_label">
<input type="checkbox" class="show" value="monday" name="1" />Me Next!</label>
<div id="monday" class="hidden">TITLE
<br>
<input type="text" name="day1title" value="" />
<br>Line 1
<br>
<input type="text" name="day1line1" value="" />
<br>Line 2
<br>
<input type="text" name="day1line2" value="" />
<br>Line 3
<br>
<input type="text" name="day1line3" value="" />
<br>Line 4
<br>
<input type="text" name="day1line4" value="" />
<br>
</div>
<br>
CSS
.show {
display: none;
}
.show_label {
border-bottom-style: solid;
border-bottom: 1px solid #AF1C2D;
cursor: pointer;
}
JavaScript
$(document).ready(function () {
$("#msg_icon").append("<img id='theImg' src='/img/StateMachine/errors/Warning.png'/>");
$("#" + $msg_icon.val()).hide();
});