Need To Fix Html And Values Appending With Javascript

I have a form that needs to be dynamic, allowing the user to add extra outcomes, w/ however many measures they need associated with it, as depicted here: http://i.stack.imgur.com/E

Solution 1:

ok so I revised allot of code here is the WORKING DEMO by making the measures children of the outcome it will save you parsing in the php side of things.

I took out the names in the template portion to prevent them from posting.

I copy the measure form one that's already close by and clear the value since there is no need to renumber everything since it will already be named correctly.

I would also strongly suggest you take out the br span and strong tags those things should be handled with css or label would be a good idea

here is the 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>

and the jquery here:

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()

and of course your 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;   
}

let me know how it goes

Solution 2:

granted mcgrailm's solution is perfectly valid, may i suggesting using a framework called knockoutjs? it's designed for exactly what you're doing; see this example.