problems with the dom after append

Question

i have just a little problems with my DOM after append but i don't know how resolve it

i look several post but with the mouseup and mousedown i did nt find

this my function

  $(function() {
    var action;
    $(".number-spinner button").mousedown(function () {
        btn = $(this);
        input = btn.closest('.number-spinner').find('input');
        btn.closest('.number-spinner').find('button').prop("disabled", false);

        if (btn.attr('data-dir') == 'up') {
            action = setInterval(function(){
                if ( input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max')) ) {
                    input.val(parseInt(input.val())+1);
                }else{
                    btn.prop("disabled", true);
                    clearInterval(action);
                }
            }, 50);
        } else {
            action = setInterval(function(){
                if ( input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min')) ) {
                    input.val(parseInt(input.val())-1);
                }else{
                    btn.prop("disabled", true);
                    clearInterval(action);
                }
            }, 50);
        }
    }).mouseup(function(){
        clearInterval(action);
    });
});

and this is my append code

    $("#dispostock"+cpt).append('<div class="input-group number-spinner">
<span class="input-group-btn data-dwn">
<button class="btn btn-default btn-info" data-dir="dwn">
<span class="glyphicon glyphicon-minus"></span>
</button></span><input type="text" class="form-control text-center" value="1" min="-10" max="40">
<span class="input-group-btn data-up"><button class="btn btn-default btn-info" data-dir="up"><span class="glyphicon glyphicon-plus">
</span></button></span></div>');

the class of dispostock is .dispostock

thanks in advance