Если надо сделать и забыть - то пофиг, и так сойдёт.
Если это поддерживаться и развиваться будет, то освой Knockout/Angular/etc. Делаешь привязку к данным через AJAX, на клиенте сохраняешь данные в ViewModel (или ему подобное), клики связываешь с выводом попапов.
Вот пример на Knockout:
<script type="text/javascript">
function PopupModel(data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
}
function ViewModel(data) {
var self = this;
var activePopup = ko.observable(null);
ko.mapping.fromJS(data, {}, self);
var popUpChooser = function(popupId) {
$.getJSON('/api/popup/' + popupId, function(data) {
// Получаем инфу для одного попапа
// JSON:
// {
// 'id': '1',
// 'name': 'foo',
// 'email': 'foo@example.com'
// }
self.activePopup(new PopupModel(data));
})
}
}
$(function() {
$.getJSON('/api/popup/ids/', function(data) { // получаем список Id инфы для попапов
// JSON такого вида: { popupIds: ['1', '2', '3'] }
ko.applyBindings(new ViewModel(data));
});
});
</script>
<div data-bind="foreach: popupsIds">
<input type="radio" data-bind="attr: {value: $data}"/>
</div>
<div class="popup" data-bind="if: activePopUp"> // отображаем, только если есть активный попап
<div data-bind="text: activePopup().name"></div>
<div data-bind="text: activePopup().email"></div>
</div>
Можно вообще сразу загружать всю инфу про попапы, код немного поменяется, но смысл тот же.
Простой
Простой