JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
    <div id="addUserModal" class="modal fade" data-toggle="validator" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Header -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Add User Form</h4>

                </div>
                <form class="form-horizontal" method="POST" role="form">
                    <!-- Body -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Name" pattern="[A-Za-z]{1,50}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="lastname">Lastname</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Lastname" pattern="[A-Za-z]{1,50}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="birthday">Birthday</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="birthday" name="birthday"...

CSS

.placeholder {
    color: #999999;
}
select option:first-child {
    color: #999999;
    display: none;
}
select option {
    color: #555;
}

JavaScript

$(document).ready(function () {
    $("form").on("submit", function () {
        $('#myTable > tbody:last-child').append("<tr><td>4</td><td>Test</td><td>Testname</td><td>7</td><td>Development</td><td><button type=\"button\" class=\"btn btn-link deleteButton\">Delete</button></td></tr>");
        $('#addUserModel').modal('hide');
        return false;
    });

    $(".deleteButton").on("click", function () {
        if (confirm("Delete User?")) $(this).parents().eq(1).remove();
    });

    $('select').on("change", function () {
        if ($(this).children('option:first-child').is(':selected')) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });
});