jQuery Forum

I have created buttons before, but not using the same methods - this one is causing me some grief. Basically, I am dynamically adding a button based on a select from an autocomplete. I was not getting what I wanted so I removed autocomplete out of the equation and worked on a simple pretense of creating a single button as described in the API example page http://api.jqueryui.com/button/#entry-examples guide - but I get different results than those described there.

My code:

1.     $("#ProductMain").after("<button class='Top Button ProductData Multiple' id='aaa' type='button'>button label<button>");
2.     $("button").button();

Using Firefox 32 the above code gives me two jQueryUI buttons - both are same height/width and colour, the first one has text "button label". The second one is blank. HTML generated code:

1. <button role="button" class="Top Button ProductData Multiple ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="aaa" type="button">
2.       <span class="ui-button-text"> button label </span>
3. </button>
4. <button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
5.       <span class="ui-button-text"> </span>
6. </button>

Info on what I have done to help myself:
I have tested to see if my function is being called twice by inserting 
an "alert(1);" - and the alert displays only once.

I can confirm that I have only one "#ProductMain".
I changed the last line of my code to $("#aaa").button() and it still 
creates two buttons, except the first one has the jqueryui css layout, 
and the second one is the gray ugly html standard button (similar height, 
no text label).

Any ideas? (Thanks for reading the post)

( jQuery v2.1.1 and jQuery UI - v1.11.0)