Some bugs in a dynamic form that I would LOVE to get fixed

I've went all out on the Fiddle here so that you get (most of) the picture:

http://jsfiddle.net/ch29z/11/

When you click + in the first row, it clones the + in its highlighted state, so the copy is green.

If you set the first row to eg. agent = excel, when it clones, the first dropdown is set back to tags, but the 2nd and 3rd remain as "=" and "excel"

If you add a 2nd row, but then delete the first row, then add another row, the spacing between the items differs from when you're first adding the rows (IMO the spacing is actually better once you've done that, it's a CSS issue obviously but I just can't get it to sit right.)

Also, when 开发者_如何学Pythonyou select variant, then bad, then go back to variant, the text box is duplicated so that there are now 2, if you repeat the process ANOTHER text box is added.

Not sure why this is happening as the code is the same for all other dynamically generated textboxes.

Any help regarding these bugs is greatly appreciated, another few pairs of eyes really do help.

Regards,

Martin

The space seems to come from the margin you set on your select:

.dropdownclone select {
...
  margin-bottom: 15px;
  margin-top: 5px;
}

For thediv.autocomplete you should have it ready in the DOM and play with a style="display:none", like you do with the select. But if you like to inject it like you do, you need to check if it does not exist already.

 $(this).parent().find(".valuestextbox").remove();

Seemed to do the trick. Thanks for your help.