Button onhold text show and mouse out text hide using jquery

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
 
  crossorigin="anonymous"></script
Click and Hold to select. simply click to unselect.<br /><br />
<span class='button'>Click Me</span>

<span id="customeButtonClick" style="display:none;">
I am good.
</span>

<script>

(function () {
    // how many milliseconds is a long press?
    var offset = 5000;

    $(".button").on('mousedown', function (e) {
        // holds the start time
        $(this).data('start', new Date().getTime());
        $(this).addClass("selected");
        $('#customeButtonClick').show();
    }).on('mouseup', function (e) {
        if (new Date().getTime() >= ($(this).data('start') + offset)) {
            //alert('ur click lasted for over 2 secs');
            $(this).addClass("selected");
            $('#customeButtonClick').show();
        } else {
            $(this).removeClass("selected");
            $('#customeButtonClick').hide();
        }
    }).on('mouseleave', function (e) {
        start = 0;
        $(this).removeClass("selected");
        $('#customeButtonClick').hide();
        //you can add destroy lingering functions on mouse leave
    });
}());
</script>

<style>
.button {
    padding:4px;
    background:green;
    border-radius:4px;
    cursor:pointer;
}
.button.selected {
    background:orange;
}
</style>


Click Me I am good.