How to destroy Jquery UI spinner on blur

Hello guys i had textboxes and i want them to be a spinner when focused and to be the textbox when blur this is my code

$(".spinner").focus(function () {
    $(this).spinner();
});

$(".spinner").blur(function () {
    $(this).spinner("destroy");
});

demo http://jsfiddle.net/ygyogba0/

but im getting an error of "Cannot read property 'replaceWith' of undefined"

can anyone help me with this?

thanks in advance

This is working for me in chrome and IE11. It seems that the spinner widget was not setting focus after it's create. Using "On" is a great practice esp if you start doing partial postbacks. However, in firefox it was not setting the focus even with the extra call. This is an issue discussed at length in forums. If you need FF you will have to deal with that.

However, The FF issue is only an issue if the user never clicks in the spinner. I am not sure this solution is ready for prod.

$("body").on("focus", ".spinner", function () {
$(this).spinner({
    create: function (event, ui) {
        $(this).focus();
        // Trying (and failing) to deal with FF
        /*setTimeout(function () {
            $(this).focus()
        }, 10); */
    }
});

});

$("body").on("blur", ".spinner", function () {
$(this).spinner("destroy");
});

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>