Jquery UI selectable: Define multiple selectable objects DYNAMICALLY - jquery-ui

Question

I really need some help on the following: I am currently developing a shopping cart. Whenever a new product is appended to shopping cart it becomes a button. This button (product) is used to add some modifiers to each product. The button definition can be seen below:
var productAdded = $('<tr class="product" data-real_id = "'+ id +'" data-id_modal="'+ mod_id +'"><td class="product_name2"><button href="#0" class="button2" style="background-color:#00a65a;" data-comment="" data-modifiers="" data-span_mod = "" data-real_id = "'+ id +'" data-id_modall="'+ mod_id +'" id = "'+ comment_id +'">' + product_name + '</button></td><td class="quantity"><span class="select"><select id="cd-product-'+ id +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></td><td class="price">' + product_price + '</td><td><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></td></tr>');
Whenever each of the product's button is pressed a JQUERY UI dialog window is opened whic contains a JQUERY UI SELECTABLE object:
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body" style="margin-top:5px;">
<div style="width:100%; float:left;">
<label for="modifier">Τροποποιητές: </label>
<span id="select-result" data-modifiers_span=""></span>
<ol id="selectable" class="txt-modifiers">
<!-- INSERTED BY JQUERY DYNAMICALLY PER PRODUCT -->
</ol>
</div>
<label for="comment">Σχόλιο: </label>
<textarea rows="4" cols="50" name="comment" id="comment" value="" class="form-control txt-comment" style="vertical-align: top;"></textarea>
</div>
<div class="modal-footer" style="margin-top:10px;">
<button class="btn btn-success btn-save" data-id="" data-id_modall="">Αποθήκευση</button>
<button class="btn btn-default" data-dismiss="modal">Κλείσιμο</button>
</div>
</div>
</div>
</div>
As you can see below the modifiers of the product are extracted using AJAZ+PHP from mysql database:
$(document).on('click touchstart','.button2',function(e){
e.preventDefault();
var id = $(this).attr('id'); //Get element id
var real_id = $(this).attr('data-real_id');
var comment = $(this).attr('data-comment'); //Get comment
var modifiers = $(this).attr('data-modifiers'); //Get modifiers
var teeee = $(this).attr('data-id_modall');
$('#modal .txt-comment').val(comment);
$('#modal .btn-save').attr('data-id',id);
$('#modal .btn-save').attr('data-id_modall',teeee);
//alert(modifiers);
if (modifiers.length == 0)
{
$("#selectable").html('<img src="images/ajax-loader.gif" />');
var request = $.ajax({
url: 'http://127.0.0.1:8080/Food%20Ball/backup/FoodBall%20Site%20form_dt_2/Food%20Ball%20Site/get_item_modifiers.php?item_id=' + real_id,
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get',
success: function(data) {
if( data.result != 'Not'){
$("#selectable").html(data.options);
$('#modal .txt-modifiers').val(data.options);
}
else{ $("#selectable").html('Δεν υπάρχουν!');
$('#modal .txt-modifiers').val('Δεν υπάρχουν!'); }
}
});
}
else { $('#modal .txt-modifiers').val(modifiers); $("#selectable").html(modifiers);}
$('#modal').dialog('open');
});
And the selectable object:
$(function () {
$('#selectable').on('touchstart mousedown', function(e) {e.metaKey = true;})
.selectable({
selected: function(event, ui) {
var result = $( "#select-result").empty();
$( ".ui-selected", this ).each(function() {
result.append($(this).attr('data-product_modifier') + ', ');
});
},
unselected: function(event, ui){
var result = $( "#select-result");
$( ".ui-unselected", this ).each(function() {
result.remove($(this).attr('data-product_modifier') + ', ');
});
}
});
});
And finally the "Save" button for each dialog modal window:
$(document).on('click touchstart','.btn-save',function(e){
e.preventDefault();
var id =$(this).attr('data-id'); //Get data id
var comment =$('.txt-comment').val(); //get the comment
var modifiers =$('.txt-modifiers').val(); //get the modifier
//update the "order" note column modal
var note_modal = '#' + $(this).attr('data-id_modall'); //get the id row of the order modal
var note_modal2 = '#2' + $(this).attr('data-id_modall'); //get the id row of the order modal
$(note_modal).find('#note_modal').text(comment+'--'+modifiers);
$(note_modal2).find('#note_modal2').text(comment+'--'+modifiers);
$('#'+id).attr('data-comment',comment);
$('#'+id).attr('data-modifiers',modifiers);
//Save it in data base..s
$('#modal').dialog('close');
$('.txt-comment').val('');//clear text area
$('.txt-modfiers').val('');//clear text area
});
$(document).on('click','.btn-default',function(e){
e.preventDefault();
//Save it in data base..s
$('#modal').dialog('close');
$('.txt-comment').val('');//clear text area
$('.txt-modfiers').val('');//clear text area
});
My problem is that if i add more than one products to my cart the selected modifiers appear for all products. How can i have multiple selectable objects defined dynamically and save each product's selected modifiers?
If anyone can help on this i will really appreciate it
Thank you

Answer 1

ok solved it:
simply put the following code within the successful return of the Ajax call:
var request = $.ajax({
url: 'http://127.0.0.1:8080/Food%20Ball/backup/FoodBall%20Site%20form_dt_2/Food%20Ball%20Site/get_item_modifiers.php?item_id=' + real_id,
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
type: 'get',
success: function(data) {
if( data.result != 'Not'){
$("#selectable").html(data.options);
$('#modal .txt-modifiers').val(data.options);
$( "#selectable" ).selectable({
stop: function() {
result_mod = $( ".select_result" ).empty();
$( ".ui-selected", this ).each(function() {
result_mod.append(' +' + $(this).attr('data-product_modifier'));
//array_mod = array_mod + (' +' + $(this).attr('data-product_modifier'));
$('#modal .select_result').val(result_mod);
});
}
});
}
else{ $("#selectable").html('Δεν υπάρχουν!');
$('#modal .txt-modifiers').val('Δεν υπάρχουν!');
$( ".select_result").html('');
$('#modal .select_result').val('');
}
}
});