JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    var showForm = function() {
    var allForms = document.getElementsByTagName('form');
    var dropdown = document.getElementById("dropdown");
    if (dropdown.value != "-1") {
        var form = document.getElementById(dropdown.value);
        for (var i = 0; i < allForms.length; i++) {
            allForms[i].setAttribute("class", "display-none");
        }
        form.setAttribute("class", "");
    }
}
</script>
<select id="dropdown" onchange="showForm()">
    <option value="-1">-- Select --</option>
	<option value="book">Book</option>
	<option value="webpage">Webpage</option>
	<option value="journal">Journal</option>
</select>
<form id="book" class="display-none" method="post" action="where-you-want-to-post/book">
	<input type="submit" value="Submit Book" />
</form>
<form id="webpage" class="display-none" method="post" action="where-you-want-to-post/webpage">
	<input type="submit" value="Submit Webpage" />
</form>
<form id="journal" class="display-none" method="post" action="where-you-want-to-post/journal">
	<input type="submit" value="Submit Journal" />
</form>

CSS

.display-none {
		display: none;
	}