Bootstrap Selectpicker - Selecting option in one select picker selects it in another

I'm running into something strange whereby clicking an option in one select picker selects it in another select picker. Basically I am creating a select picker which contains the selected options from the original clicker, and am doing this per user selected (which are selected in another select picker).

When add member button is clicked, the values from the member and roles select pickers are used to generate some HTML, of which is a select picker with the selected role contents. I unselect the selected options in roles, refresh it then add the html. Once the html is generated, the selected roles are added to the new select picker which is the initialized.

$("#adminAddMember").on("click", function(){
        var members = $("#groupMembers").find("option:selected")//.prop('selected', false);
        var roles = $("#createRoles").find("option:selected").prop('selected', false);
        $("#createRoles").selectpicker('refresh');
        $.each(members, function(index, item){
            var member = $(item).val();
            $("#adminAddMember").parent().parent().before("<div class=\"row\">\n" +
                "                        <div class=\"col-sm-2 col-form-label my-auto\">\n" +
                "                            <p>"+member+"</p>\n" +
                "                            <input type=\"hidden\" class=\"members\" name=\"currentMembers[]\" value='"+member+"'>\n" +
                "                        </div>\n" +
                "                        <div class=\"col-sm my-auto\">\n" +
                "                            <select class='selectpicker role "+member+"' multiple data-live-search=\"true\" id="+member+"CurrentRoles name=\"currentRoles\" title=\"Current Roles\" data-value=\"post\">\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                       <div class=\"col-sm my-auto\">" +
                "                            <div class=\"btn btn-info btn-sm\" id=\"adminRemoveRole\">Remove Role(s)</div>" +
                "                       </div> " +
                "                        <div class=\"col-sm my-auto\">\n" +
                "                            <div class=\"btn btn-info btn-sm\" id=\"adminRemoveMember\">Remove Member</div>\n" +
                "                        </div>\n" +
                "                    </div>");
            var selector =
            roles.appendTo($("."+member));
            $("."+member).selectpicker();
        });
        $("#groupMembers").find("option:selected").remove();
        $("#groupMembers").selectpicker('refresh');
    });

Whenever I select an option in either select picker, it will select the option in the other select picker as well. Why is this happening and how do I prevent it.

Generated HTML (Users bob and joe selected):

<div class="row">
    <div class="col-sm-2 col-form-label my-auto">
        <p>joe</p>
        <input type="hidden" class="members" name="currentMembers[]" value="bob">
    </div>
    <div class="col-sm my-auto">
        <select class="selectpicker role bob" multiple="" data-live-search="true" id="bobCurrentRoles" name="currentRoles" title="Current Roles" data-value="post" tabindex="-98"></select>
    </div>
</div>

<div class="row">
    <div class="col-sm-2 col-form-label my-auto">
        <p>joe</p>
        <input type="hidden" class="members" name="currentMembers[]" value="joe">
    </div>
    <div class="col-sm my-auto">
        <select class="selectpicker role joe" multiple="" data-live-search="true" id="joeCurrentRoles" name="currentRoles" title="Current Roles" data-value="post" tabindex="-98">
            <option name="Student" value="Student">Student</option></select>
    </div>                
</div>

Pre-existing HTML:

<div class="row">
    <label for="groupMembers" class="col-sm-2 col-form-label my-auto">Add Member(s):</label>
    <div class="col-sm my-auto">
        <select class="selectpicker" multiple="" data-live-search="true" id="groupMembers" name="groupMembers" title="Choose Members" tabindex="-98"> 
            <option name="bob value=" bob="">bob</option><option name="bob value=" bob="">bob</option></select>
    </div>
    <div class="col-sm my-auto">
        <select class="selectpicker" multiple="" data-live-search="true" id="createRoles" name="roles" title="Choose Roles" tabindex="-98">
            <option name="Group Admin" value="Group Admin">Group Admin</option>
            <option name="User" value="User">User</option>              
         </select>
    </div>

Whats also strange is that bob's select picker has no options yet when clicking the select picker the options can be seen. What's more, removing roles from a user's select picker also removes them from the original role select picker