Using javascript/jQuery to hide certain elements on screen retrieved from $.post - php

Question

most likely an easy solution, but please forgive my early learning curve in the world of programming and using php with jquery together. I'm able to retrieve information from the database easily and display that on the screen. However, I'd like to be able to hide certain elements that are retrieved from the database and written out in php on the page and show them on a click event. I'm able to do this easily on other sections of the website, that are not being retrieved using $.post. Are there certain rules that apply with jQuery once I've used $.post and ajax to retrieve info from the database?
php below:
<?php echo "
<div class='phone_tracking customCall separation'>
<h3>Phone Tracking</h3>
<a class='showCustomDatePhone' href='#customDate_individualPhone'>View & Listen to Individual Phone Leads >></a>
<table>
<tr class='tableHead'>
<td>Date</td>
<td>Traffic+ Calls</td>
<td>New Vehicle Calls</td>
<td>Used Vehicle Calls</td>
<td>Service Calls</td>
<td class='totalTally'>Total Calls</td>
</tr>
<tr>
<td>`$valueRetrieved` - `$valueRetrieved2`</td>
<td>$customDateTrafficPlusTally</td>
<td>$customDateNewVehicleTally</td>
<td>$customDateUsedVehicleTally</td>
<td>$customDateServiceTally</td>
<td>$customDateTally</td>
</tr>
</table>
<div id='customDate_individualPhone'>
<h4>All Individual Phone Calls For `$valueRetrieved` - `$valueRetrieved2`</h4>
<table>
<tr>
<td>Date</td>
<td>Ad Source</td>
<td>Caller Phone Number</td>
<td>Tracking Phone Number</td>
<td>Target Phone Number</td>
<td>Call Duration (in seconds)</td>
<td>Result of Phone Call</td>
<td>Call Listen Link</td>
</tr> " . $showTheCustomDatePhoneTable ."
</table>
</div>
</div>
"; ?>
jQuery below:
$('#customDate_individualPhone').hide();
$('.showCustomDatePhone').click(function(){
var txt = $("#customDate_individualPhone").is(':visible') ? 'View & Listen to Individual Phone Leads >>' : '<< Hide Individual Phone Leads';
$(".showCustomDatePhone").text(txt);
$('#customDate_individualPhone').toggle();
});
The ajax to retrieve the data (if that helps)
$('#getDateRange').on('click', function(){
var startDate = $('#dateStart').val();
var endDate = $('#dateEnd').val();
if ($.trim(startDate) != '') {
$.post('../../includes/dateRangeWhitePlainsNissan.php', {dateStart: startDate, dateEnd: endDate}, function(data){
$('#fromDatabase').html(data);
});
}
});
I'm still very new to programming so you're help is greatly appreciated! Thanks

Answer 1

You'll need to re-initialize your click functions with a callback, or convert them to use on().
$('.showCustomDatePhone').on('click', function(){});