Getting group members from group using jquery

Question

In my fiddle there are two tables(in the users tab),one for showing group members and another for showing group names.In the fiddle some of the already created groups are test3,spanwave and koio.The members of spanwave are namenayak and ajay.Similarily the members for koio are steven and name.Now suppose If I click spanwave then from the left side table the check boxes of namenayak and ajay will be selected.And similarily if I click the koio group then steven and name will be selected.This is working fine for newly created groups but I dont know how to get the same working of existing groups.

newly created groups click more than 2 checkboxes then a group button will appear,now click the group button then an alert pop will appear asking you to enter group name.Enter some name and click ok.Then that name will now appear on the right side group table.Now clcik the group name then those members will be selected.I want to the same from existing groups also.Please tell me how.

Javascript code for newly created groups

$(document).on('click', '#btn2',function () {
        var groupmems="";
        var grpname;
    var email=new Array();
        var username=new Array();
        var mobno=new Array();
        var creat_group = prompt("Name your group??");
        grpname=creat_group;

        if (creat_group) {
            console.log(obj);

            $("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
            $tr=$("#groupTr" + groupTrCount);
            var sCheckbox = new Array();
            $('#mytable tr').find('input[type="checkbox"]:checked').each(function(i) {               
                    sCheckbox.push($(this).attr("data-id"));
                    alert("hello " +sCheckbox);
            });
             var ds = (sCheckbox.length > 0) ? sCheckbox.join(",") : "";
            $tr.append("<td data-selected='"+ds+"'> <input type='button' id='btn5' class='btn btn-lg btn-primary' value='"+creat_group+"'/>  </td>");
            var userColumn = "<ul>";
            $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
                var count=0;
                var arrid=0;
                $(this).find('td').each(function() {

                    //your ajax call goes here
                    if(count == 1){

                        userColumn+= "<li>" + $(this).html() + "</li>" ;
                                                username[arrid]=$(this).html();

                        groupmems=groupmems+$(this).html()+":";


                    }
                  if(count==2)
                    {
                                                email[arrid]=$(this).html();

                        groupmems=groupmems+$(this).html()+":";


                    }
                    if(count==3)
                    {
                                                mobno[arrid]=$(this).html();

                        groupmems=groupmems+$(this).html()+";";


                    }
                    count++;
                    });
                arrid++;
            });
            $('input:checkbox').removeAttr('checked');
alert("group name "+grpname);
             alert(groupmems);
//ajax for group insert
            $.ajax(
               {
                   type: "POST",
                   url: "GroupInsert.jsp", //Your full URL goes here
                   data: { group: groupmems,groupname:grpname},
                   success: function(data, textStatus, jqXHR){
                       alert(data);                  
                   },
                   error: function(jqXHR){
                       alert(jqXHR.responseStatus);
                   }
               });
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });

Answer 1

As per your present data you need id of the user

Example : http://sqlfiddle.com/#!2/bc9d57/1

By the sql output data.. your code should be like

<tr>
   <td data-selected="{UIDS}">{GROUPNAME}</td>
</tr>

Example:

<tr>
   <td data-selected="40,46">koio</td>
</tr>
<tr>
   <td data-selected="48,50">spanwave</td>
</tr>