JSFiddle - React, Tailwind, and code Playground

HTML

<div id="GraphTools">
    <div id="GraphSearch">
        <form id="GraphSearchForm">
            <div id="GraphSearchFields">
                <input type="text" data-default-value="Sender" id="SenderBox0" class="GraphSearchBox" />
                <input type="text" data-default-value="Reciever" id="RecieverBox0" class="GraphSearchBox" />
                <input type="text" data-default-value="Sender" id="SenderBox1" class="GraphSearchBox" />
                <input type="text" data-default-value="Reciever" id="RecieverBox1" class="GraphSearchBox" />
            </div>
            <input type="button" id="AddNewHumanSet" value="+" />
            <input type="submit" value="Go" />
            <input type="button" value="Reset" class="GraphResetButton" />
        </form>
    </div>
    <div id="GraphZoom">
        <input type="button" value="-" />
        <input type="button" value="+" />
    </div>
</div>

CSS

#GraphTools
{
    border-top: 1px solid #BBBBBB;
    height: 24px;
    margin: 0 5px 3px;
    padding-top: 2px;
}

#GraphSearch 
{
    float: left;
}

#GraphTools input
{
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 2px #444444 inset;
    font-size: 14px;
    padding: 2px;
}

#GraphTools input[type=button]:active, #GraphTools input[type=submit]:active
{
    background-color: rgba(192, 192, 192, 0.4);
}

#GraphSearchFields 
{
    float: left;
    margin-right: 5px;
}

#GraphSearchFields input
{
    margin: 0 5px 0 5px;
}

#GraphZoom 
{
    float: right;
}

JavaScript

$(document).ready(function ()
{
    function LoadDefaultSearchBoxValues()
    {
        $(".GraphSearchBox").each(function (i, e)
        {
            if ($(this).val() == "")
            {
                $(this).val($(this).data("default-value"));
            }
        });
    }
    LoadDefaultSearchBoxValues();
    $(".GraphSearchBox").live("focus", function ()
    {
        if ($(this).val() == $(this).data("default-value"))
        {
            $(this).val("");
        }
    });
    $(".GraphSearchBox").live("blur", function ()
    {
        if ($(this).val() == "")
        {
            $(this).val($(this).data("default-value"));
        }
    });
    $("#GraphSearchForm").live("submit", function (event)
    {
        event.preventDefault();

        var SenderBoxHasValue = !($("#SenderBox").val() == $("#SenderBox").data("default-value") && $("#SenderBox").val() == "");
        var RecieverBoxHasValue = !($("#RecieverBox").val() == $("#RecieverBox").data("default-value") && $("#RecieverBox").val() == "");
        if (SenderBoxHasValue && RecieverBoxHasValue)
        {
            graph.filterEdges(function (edge)
            {
                return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1 &&
                       edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1;
            });
        }
        else if (SenderBoxHasValue)
        {
            graph.filterEdges(function (edge)
            {
                return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1;
            });
        }
        else if (RecieverBoxHasValue)
        {
            graph.filterEdges(function (edge)
            {
                return edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1;
            });
        }
    });
    $(".GraphResetButton").live("click", function ()
    {
        graph.resetGraph();
   ...