JSFiddle - React, Tailwind, and code Playground

by mcgrailm

HTML

<form action="#" method="post">
    <div class="outcomegroup" id="template">
        <div class="col">
            <strong>Outcome #<span class="onum">1</span></strong>
            <img class="plus addoutcome" src="http://i54.tinypic.com/2zqzzo7.jpg" />
            <img class="minus removeoutcome" src="http://i53.tinypic.com/29apc8i.jpg" />
            <br />
            <textarea class="outcome"></textarea>
        </div>
        
        <div class="col">
            
            <div class="measure1">
                <textarea></textarea>
            </div>
            
            <div class="measure">
                <textarea></textarea>
                <img class="plus addmeasure" src="http://i54.tinypic.com/2zqzzo7.jpg"/>
                <img class="minus removemeasure" src="http://i53.tinypic.com/29apc8i.jpg"/>
            </div>
            
        </div>
        
    </div>
    
    <div id="outcome-measure-fields"></div>
    <input type="submit" value="submit" />
</form>

CSS

.outcomegroup {
    overflow: auto;  
}

#template {
    display: none;
}

.col {
    float: left; 
    margin: 5px;  
    font-size: 20px;
    font-weight: bold;
}

.plus, .minus {
    width: 20px;
    margin: 2px;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

.minus {
    display: none;   
}

JavaScript

function renumber() {
    $('#outcome-measure-fields .outcomegroup').each(function(index, value) {
        $(this).find('.outcome').attr('name', 'outcomes[' + index + '][outcome]');
        $(this).find('.measure textarea').attr('name', 'outcomes[' + index + '][measure][]');
        $(this).find('.measure1 textarea').attr('name', 'outcomes[' + index + '][measure][]');
        $(this).find('.onum').text(index + 1);
    });

}

$('.addmeasure').live('click', function() {
    $(this).closest('.measure').clone().insertAfter($(this).closest('.measure')).val('').find('.minus').show();
});

$('.addoutcome').live('click', function() {
    $('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
    renumber();
});

$('.removeoutcome').live('click', function() {
    $(this).closest('.outcomegroup').remove();
    renumber()
});

$('.removemeasure').live('click', function() {
    $(this).closest('.measure').remove();
});

$('#template').clone().appendTo($('#outcome-measure-fields')).removeAttr('id');
renumber()