Dynamic Bootstrap Modal with php and jQuery - php

Question

I have multiple information boxes, with short info echoed from the database. at the bottom of each box is "more information" when click this triggers a modal.
The issue: at the moment when "more information" is clicked it displays the same information regardless of which info box was clicked.
The objective: When more information is clicked i need the respective information to be displayed. Some how referencing that row number X needs to be displayed when "more information" is click on that information box.
I tried is, but it didn't work:
jQuery(document).ready(function($) {
$('.moreinfo').click(function(event) {
var a = $(this);
// Get ID
var currentID = parseInt(a.data('id'));
$.ajax({
type : 'post',
url : 'ajax.php', // in here you should put your query
dataType: 'json',
data: {'vac_id': currentID}, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success : function(json)
{
// Change the ID in modal
var m = $('#moreinfo'), mBody = m.find('.panel-body');
// Update new content
$('#vac_id').text(json.vac_id);
$('#vac_post_date').text(json.vac_post_date);
$('#vac_job_title').text(json.vac_job_title);
$('#vac_comp_name').text(json.vac_comp_name);
$('#job_description').text(json.job_description);
$('#vac_ess_one').text(json.vac_ess_one);
$('#vac_ess_two').text(json.vac_ess_two);
$('#vac_ess_three').text(json.vac_ess_three);
$('#vac_ess_four').text(json.vac_ess_four);
$('#vac_ess_five').text(json.vac_ess_five);
$('#vac_ess_six').text(json.vac_ess_six);
$('#vac_ess_seven').text(json.vac_ess_seven);
$('#vac_ess_eight').text(json.vac_ess_eight);
$('#vac_ess_nine').text(json.vac_ess_nine);
$('#vac_ess_ten').text(json.vac_ess_ten);
$('#vac_des_one').text(json.vac_des_one);
$('#vac_des_two').text(json.vac_des_two);
$('#vac_des_three').text(json.vac_des_three);
$('#vac_des_four').text(json.vac_des_four);
$('#vac_des_five').text(json.vac_des_five);
$('#vac_des_six').text(json.vac_des_six);
$('#vac_des_seven').text(json.vac_des_seven);
$('#vac_des_eight').text(json.vac_des_eight);
$('#vac_des_nine').text(json.vac_des_nine);
$('#vac_des_ten').text(json.vac_des_ten);
$('#vac_deadline').text(json.vac_deadline);
$('#apply_link').text(json.apply_link);
m.modal('show');
}
});
event.preventDefault();
});
});
Here you can see the modal and modal trigger: FIDDLE
Any help is genuinely appreciated.

Answer 1

Here's how I used to create dynamic modal/dialog:
var modal = $('#mymodal');
modal.find('.modal-title').text(newTitle); // Change modal title (optional)
modal.find('.modal-body').html(somethingNew); // Change modal content
modal.show();
For example: https://jsfiddle.net/3ey8tyz3/

Answer 2

I suppose when you load modal for the first time it gets cached and every time returns the same content.
You might need to clear the modal first and then reload on the basis of your id.
You can do-
$('#myModal').on('loaded.bs.modal',function(e){
}).on('hidden.bs.modal',function(e){
$(this).removeData('bs.modal');
});
Wrap this into a function and call it on document.ready