Appending jQuery UI Spinner Dynamically

I'm having problems with the jQuery UI Spinner widget. It works fine when the input is added in the html; however, when I add the input dynamically it does not work. I created an example of the spinner not working when it is added dynamically here: jsfiddle example

function injectSpinner(){
    console.log("Injecting Spinner");

    var p = document.createElement('p');
    var label = document.createElement('label');
    var text = document.createTextNode("Select a value:");
    var input = document.createElement('input');

    label.appendChild(text);
    label.setAttribute("for", "spinner");
    p.appendChild(label);

    input.setAttribute("id", "spinner");
    input.setAttribute("name", "value");
    p.appendChild(input);

    $("#spinner").spinner();

    $("#moduleArea").append(p);
};

I have used this method with a lot of the other jQuery UI widgets and there seems to be no problem.

The input has to be part of the DOM before you call .spinner() on it.
So please call $("#moduleArea").append(p); before $("#spinner").spinner();
I have updated your fiddle accordingly.