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

<formaction="#"method="post"><divclass="outcomegroup"id="template"><divclass="col"><strong>Outcome #<spanclass="onum">1</span></strong><imgclass="plus addoutcome"src="http://i54.tinypic.com/2zqzzo7.jpg" /><imgclass="minus removeoutcome"src="http://i53.tinypic.com/29apc8i.jpg" /><br /><textareaclass="outcome"></textarea></div><divclass="col"><divclass="measure1"><textarea></textarea></div><divclass="measure"><textarea></textarea><imgclass="plus addmeasure"src="http://i54.tinypic.com/2zqzzo7.jpg"/><imgclass="minus removemeasure"src="http://i53.tinypic.com/29apc8i.jpg"/></div></div></div><divid="outcome-measure-fields"></div><inputtype="submit"value="submit" /></form>

and the jquery here:

functionrenumber() {
    $('#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.