JSFiddle - React, Tailwind, and code Playground

by arjuncc

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<fieldset>
    <div class="control-group custom">
        <label class="input-mini" for="first">Start</label>
        <label class="input-mini" for="first">End</label>
        <label class="input-mini" for="first">Share</label>
    </div>
    <div class="control-group custom">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
    <div class="control-group custom">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
    <div class="control-group custom">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
    <div class="control-group custom">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
    <div>	<a id="plus_time_button" class="btn plus" href="#"><i class="icon-plus-sign"></i></a>

    </div>
</fieldset>

CSS

.custom label {
    padding: 4px 6px;
    margin-right: 20px;
    display: inline-block;
    text-align: center !important;
}
.custom input {
    margin-right: 20px;
}

JavaScript

$("#plus_time_button").live("click", function () {
    var new_row = "<div class=\"control-group custom\"><input type=\"text\" class=\"input-mini\">&nbsp<input type=\"text\" class=\"input-mini\">&nbsp<input type=\"text\" class=\"input-mini\"></div><div><a id=\"plus_time_button\" class=\"btn plus\" href=\"#\"><i class=\"icon-plus-sign\"></i></a></div>";
    $("fieldset div:last-child").remove();
    $("fieldset").append(new_row);
    scrollToBottom("create_table");
});