Jquery help append HTML not working

Question

I am trying to add this HTML also when a input field is added:

<div id="redDiv" style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>
<div id="greenDiv" style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>

My not edited Jquery http://jsfiddle.net/gDChA/23/ :

function findLastInput ( element ) {
  return $( element ).parent().prev().find('input').last();
}
    $('button.add').click ( function(e) {
        $(this).parent().find('button.remove').show();
        $(this).hide();

        var element = findLastInput(this).clone();
        var name = element.prop('name');
        var pattern = new RegExp(/\[(.*?)\]/);
        var info = name.match(pattern)[1];
        element.prop({
          'value': '',
          'name' : name.replace(pattern, '[' + info + 'info' + ']'),
          'id'   : element.prop('id') + 'info',
          'type' : 'input',
          'class' : 'infoinput'
        });    
        $(this).parent().append(element);
    })
    $('button.remove').click ( function(e) {
        $(this).parent().find('button.add').show();
        $(this).hide();
        //findLastInput(this).remove('input');
        $(this).parent().find("input").remove();
    });

First I have tried to add the extra HTML without luck. I have edited this $(this).parent().append(element);

To this and it is not working:

$(this).parent().append(element + '<div id="redDiv" style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>
    <div id="greenDiv" style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>');

I want to add the HTML and removed it the same way as the input field works.

Answer 1

You proably need to add your extra html to element.html() instead of element (element is just an object returned from your function findLastInput), so it should be something like this:

$(this).parent().append( element.html() + '');