How can i display time in place of button? - php

Question

I want to display a time in place of button when button clicked then
button fadein and time show in place of button but my script not
working button fadein only and time didn't show in place of button and
"Time shown when i refresh the whole page but not a particular part
refreshing."
foreach($leads as $val):?>
<tr><td class = 'account-name sort-value'>
<span style='float:left;width:47%;'>
<?php echo $val->first_name .' '. $val->last_name;?></span>
<?php
if($val->checkin_time != '') {?>
<span class = 'Dischktime' id = 'dischktime{<?php echo $val->lead_id;?>}' ><?php echo $val->checkin_time;?>
</span>
<?php
}
else {?>
<span style='float:left;width:26%;'>
<button id ='checkin{<?php echo $val->lead_id;?>}' class='btn btn-default' name='checkinbt' value='<?php echo$val->lead_id; type='button'>CheckIn
</button>
</span>
<?php }
?>
<span>
<?php echo $_SESSION['drivername'];?>
</span>
</td></tr>
<?php endforeach;
}
?>
<script type="text/javascript">
$(document).ready(function() {
$("[id=checkin]").on("click" , function() {
//$(this).fadeOut();
$(this).fadeOut('slow', function() {
//alert("it's working");
$("‪#‎dischktime‬").show();-------(Not working)
});
$('button').submit(function(e) {
e.preventDefault();
return false;
});
//alert($(this).attr('value'));
var lead_id = $(this).attr('value');
//alert(lead_id);
$.ajax({
method: "POST",
url: 'search_db_test.php',
data: 'checkinbt=' + lead_id,
success: function(data) {
$(this).html(data);
//$("#dischktime").show(data);-----(Not working)
}
});
});
});
</script>

Answer 1

You are creating element based on condition. When button is shown your Time span having id : dischktime is not created and thus its not available in DOM. Modify you foreach :
foreach($leads as $val):?>
<tr><td class = 'account-name sort-value'>
<span style='float:left;width:47%;'>
<?php echo $val->first_name .' '. $val->last_name;?></span>
<?php
if($val->checkin_time != '') {?>
<span class = 'Dischktime' id = 'dischktime{<?php echo $val->lead_id;?>}' ><?php echo $val->checkin_time;?>
</span>
<?php
}
else {?>
<span style='float:left;width:26%;'>
<button id ='checkin{<?php echo $val->lead_id;?>}' class='btn btn-default' name='checkinbt' value='<?php echo$val->lead_id; type='button'>CheckIn
</button>
</span>
**<span style="display:none;" class = 'Dischktime ' id = 'dischktime{<?php echo $val->lead_id;?>}' >**
</span>
<?php }
?>
<span>
<?php echo $_SESSION['drivername'];?>
</span>
</td></tr>
<?php endforeach;
}

Answer 2

Try Css Property
$("#dischktime‬").css('display', 'block') instead of $("‪#‎dischktime‬").show();