JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap.min.js"></script>
<script src="bootstrap.min.css "></script>
    <button class="btn btn-primary" id="insert">Insert</button>
    <button class="btn btn-primary" id="update">Update</button>
    <button class="btn btn-primary" id="delete">Delete</button>
    <button class="btn btn-primary" id="workflow">Workflow</button>    
<br><br>
    <form id="myForm">
        <input name="colo" id="colo" placeholder="colo">
        <input name="node" id="node" placeholder="node">
        <input name="data" id="data" placeholder="data">
        <input name="value" id="value" placeholder="value">
    </form>
            <br>
            <button class="btn btn-success" id="submit">Submit</button>
    <br><br>

CSS

body {
    padding: 10px;
}

JavaScript

$("#colo, #node, #data, #value, #submit").hide();

var dataHolder = '<input name="data" id="data" placeholder="data">';
var nodeHolder = '<input name="node" id="node" placeholder="node">';
var coloHolder = '<input name="colo" id="colo" placeholder="colo">';
var valueHolder = '<input name="value" id="value" placeholder="value">';

$("#insert, #update").click(function(){
    if ($("#value").width() > 0){
        $("#value").remove();
    }
    $("#colo, #node, #data, #value").hide();
    $("#colo, #node, #data").show();
    $("#submit").show();
});

$("#delete").click(function(){
    if ($("#value").width() > 0){
        $("#value").remove();
    }
    $("#colo, #node, #data, #value").hide();
    $("#node").show();
    $("#submit").show();
})


$("#process").click(function(){
        $("#colo, #node, #data").show();
    if ($("#value").width() < 1){
        $("#myForm").append(valueHolder);
    }
})