How to add a class to the corresponding popup

Question

I have got two div's

<div id="one">
and
<div id="two">

Each div has got a button class named addonsBtn , when clicked on that it will open a popup and append data to the corresponding popup

If clicked on First Addon , is it possible to add class by name 'foroneclass' so that it looks this way

<div data-role="popup" id="addonsWrap789" class='foroneclass' data-theme="a">
</div>

Similarly

If clicked on Second Addon , is it possible to add class by name 'fortwolass' so that it looks this way

<div data-role="popup" id="addonsWrap790" class='fortwolass' data-theme="a">
</div>

This is my fiddle http://jsfiddle.net/cod7ceho/109/

Answer 1

Sure. There are a few ways to skin a cat

Basic solution

Based on your fiddle, you can extend the following two lines:

Line 8 is:

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin(); 

Becomes:

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass("foroneclassfo");

And line 15:

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin();

Becomes:

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin().addClass("foretwoclassfo");

Cleaner solution

I've cleaned up your jsfiddle file a bit. We can approach it in a bit more of a reusable way by taking the toppname and appending your desired class suffix onto the end. This way, you could have 2 or 10 modals and it would continue to work as intended.

$(document).on('click', '.addonsBtn', function (e) {
  var toppname = $(this).data('toppname');
  var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>';

  $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate');
  $("#addonsWrap789").trigger('create').trigger('pagecreate');
  $("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass(toppname + 'class');
});

Updated fiddle: http://jsfiddle.net/cod7ceho/110/