Jquery help append HTML not working

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"开发者_StackOverflow 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.

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() + '');