Button with ID doesnt work after jQuery Success Response

Question

I have a question regarding my jQuery process. So i have a button with id that will be replaced with a new ID with AJAX Response.

so my markup code,,

<div id="pobutton_detail">
        <button class="btn btn-default" type="button" disabled><i class="fa fa-warning"></i> &nbsp; Select Data First &nbsp;</button>
    </div>

So in this case, button will stay disabled until AJAX below is executed,

$('#poname').on('change', $(this), function () {
            var job = '<?php echo $jobValue; ?>';
            var subjob = '<?php echo $subjobValue; ?>';
            var po = $('#poname').val();
            $.ajax({
                type: 'POST',
                url: "pages/po/divpages/show_all_po_content.php",
                data: {job: job, subjob: subjob, po: po},
                success: function (response, textStatus, jqXHR) {
                    $('#pobutton_detail').html('<button class="btn btn-success" type="button" id="allposhow"><i class="fa fa-unlock"></i> &nbsp; SHOW <i>' + job + ' - ' + subjob + '</i> : <b>' + po + '</b></button>');
                }
            });
        });

And after the new response button activated, I need to grab the ID of that button for the second process as follows,

$('#allposhow').on('click', $(this), function () {
            var job = $('#jobname').val();
            $.ajax({
                type: 'POST',
                url: "pages/po/divpages/show_all_po_content.php",
                data: {job: job, subjob: subjob, po: po},
                success: function (response, textStatus, jqXHR) {
                    $('#listpocontent').html(response);
                    //alert(response);
                }
            });
        });

the problem is, i cant get the second ajax to work by accessing ID="allposhow". Please help me on this matter..

thanks in advance