JSFiddle - React, Tailwind, and code Playground

HTML

<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>

                                <!-- images and continued input extension-->
        <!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>

CSS

html, body {
    max-width: 100%;
    height:100%;
    overflow-x: hidden;
    background: url('banners/1347919245877.jpg');
}
.white {
	background-color: white;
	border: 20px white solid;
	border-radius:10px;
	box-shadow: 5px 5px 5px;
}
#video {
	Overflow: hidden;
}
#centerdiv {
	Display: inline;
}
.videobuttons {
	margin-top:-250px;
}
#calendar {
	Position: absolute;
	Top: 10px;
	Left: 20px;
	Width:6%
}
#chatbox {
	Height: 470px;
	Overflow-y: scroll;
}
#talkbox {
	Height: 470px;
	Overflow-y: scroll;
}
#shoutbox {
	margin-top:-40px;
}
/*
.postbuttons {
	width: auto;
	background-color: white;
	border: 20px white solid;
	border-radius:10px;
	box-shadow: 5px 5px 5px;
}
*/

JavaScript

var imagebox = 'ORIGINAL STATE';

var watchform =  '<form action="post/watchpost.php" method="post">' + 
'<input type="text" name="watchid" /><br>' + 
'<input type="submit" class="btn btn-default" value="Contribute" />' + 
'</form>' + 
'<br><br><button type="button" class="btn btn-default" class="nevermind">nevermind</button>';

$(document).ready(function(){
                                    //control functionality
$('.nevermind').click(function(){
    $('#imagebox').html(imagebox);
});

$('#watchcontrol').click(function(){
    $('#imagebox').html(watchform);
});
});