JSFiddle - React, Tailwind, and code Playground

by b9chris

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 id=T 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

(function() {
    var plus = $('#plus_time_button').closest('div');
    var T = $('#T');
    T[0].id = '';
    
    for(var i = 0; i < 3; i++)
        plus.before(T.clone());

    $("#plus_time_button").live("click", function () {
        plus.before(T.clone());
    });
})();