прокручиваемый список прокручиваемый список-группа-сброс для выбора элемента

Question

У меня есть два списка:

• Полный список всех гостей
• Список гостей группы (это подмножество гостей из основного списка)

Когда я выбираю гостя из группы, я хочу автоматически прокрутить первый список, чтобы показать выбранного гостя.

Я пытался использовать привязку тегов HTML с HREF, но это не работает.Я попытался data-spy = "scroll", но все, что я читал, было о списке NAV и ничего об одной ссылке.

Вот DIV для отображения полного списка:

<div class="list-group-flush p-0 pre-scrollable" id="guestslist"></div>

Этот код создает полный список:

function shownnonassignedguests() {
    var showall = $( '#showalltoggle' ).text();
    var addgroup, nomembership, imagefile, icon;
    var gn, gnid, email, group, list = '';
    if ( $( '#searchinputguests' ).val() == '' ) {
        $.ajax( {
            type: 'POST',
            dataType: "json",
            url: "ajaxphp/group_functions.php",
            data: {
                showall: showall,
                function: 'showunassignedguests1'
            },
            success: function ( data ) {
                //console.dir (data);
                $.each( data.guests, function ( i, obj ) {
                    gn = 'gn' + obj.account_id;
                    gnid = 'gnid' + obj.account_id;
                    email = obj.account_email;
                    if ( group_id === 0 || group_full ) {
                        allowadd = 'disabled rel="tooltip" title="The group is either full or not selected. Select another group or remove a guest first in order to add this one."'
                            //icon = "far fa-times-circle";
                        icon = "fas fa-arrow-alt-circle-right";
                    } else {
                        allowadd = 'rel="tooltip" title="click here to add to the selected group"';
                        icon = "fas fa-arrow-alt-circle-right";
                    }
                    if ( obj.group_id == 0 ) {
                        group = '<button ' + allowadd + ' class="btn btn-link btn-xs guestselect ' + gn + ' " id="' + gnid + '" type="button" onClick="addtogroup(' + obj.account_id + ');"><i class="' + icon + ' fa-2x"></i></button>';
                        nomembership = ""; // ""bg-success text-white";
                    } else {
                        group = '&nbsp;';
                        nomembership = "";
                    }
                    if ( email == "" )
                        email = "&nbsp;";
                    list += '<a href="#" class="list-group-item list-group-item-action p-1 pl-2 guestselect clearfix ' + gn + ' ' + nomembership + '" onClick="displayguestinfo(' + obj.account_id + ');">' + obj.account_firstname + " " + obj.account_lastname;
                    list += '<span class="float-right">' + group + '</span><br><small>' + email + '</small></a>';

                } )
                $( '#guestslist' ).html( list );
                var count = data.count + '/' + data.totalguests
                $( '#guestcount' ).html( count );
                account_id = $( '.account_id' ).val();
                var gn = "gn" + account_id;
                $( '.guestselect' ).removeClass( "list-group-item-primary" );
                $( '.' + gn ).addClass( "list-group-item-primary" );
            }
        } )
    }
}

Этот код создает небольшую группу гостей (группа гостей IE за одним столом). Когда гость выбирается из этого списка, чтобы первый список автоматическиscroll.

function displaygroupguests() {
    var row, name, guests, fields, guestcount, fullname;
    $( '.groupselect' ).removeClass( "list-group-item-primary" );
    var gm = "gm" + group_id;
    $( '#' + gm ).addClass( "list-group-item-primary" );
    $.ajax( {
        type: 'POST',
        dataType: "json",
        url: "ajaxphp/group_functions.php",
        data: {
            group_id: group_id,
            function: 'groupguests'
        },
        success: function ( data ) {
            guests = data.guests;
            fields = data.groupfields;
            if ( data.group_maxguests > data.guestcount )
                group_full = false;
            else
                group_full = true;
            var c = 0,
                icon = '',
                fullname = '',
                checkin = 'href="#"',
                checkintitle = "Click here to manually check-in this guest.",
                checkouttitle = "Click here to remove guest check-in.";
            if ( data.allowcheckin != "true" ) {
                checkin = "";
                checkintitle = checkouttitle = "Checking Toggle. This feature is only available during the event.";
            }
            row = '';
            $.each( guests, function ( key, value ) {
                c++;
                console.log( value );
                gn = 'gn' + value.account_id;
                fullname = "'" + value.account_firstname + " " + value.account_lastname + "'";
                name = value.account_firstname + " " + value.account_lastname;
                if ( value.arrival == "N/A" )
                    icon = '<span class="float-right">' + value.arrival + '<button class="btn btn-link btn-sm" rel="tooltip" title="' + checkintitle + '" onClick="togglearrival(1, ' + value.account_id + ',' + fullname + ');"><i class="far fa-square"></i></button></span>';
                else
                    icon = '<span class="float-right">' + value.arrival + '<button class="btn btn-link btn-sm" rel="tooltip" title="' + checkouttitle + '" onClick="togglearrival(0,' + value.account_id + ',' + fullname + ');"><i class="far fa-check-square" style="color:green"></i></button></span>';
                if ( data.allowcheckin !== "past" ) {
                    // icon += '<button class="btn btn-link btn-xs" rel="tooltip" title="Click here to remove this guest from the group." onClick="removefromgroup(' + value.groupmember_id + ',' + value.group_id + ',' + value.account_id + ');"><i class="icon-fixed-width fas fa-times removeguest"></i></button>';
                    //icon += '<button class="btn btn-link btn-xs" rel="tooltip" title="Edit Guest" onClick="editeventguest(' + value.account_id + ');"> <i class="fas fa-pencil-alt"></i></button>';
                }
                row += '<a href="#" class="list-group-item list-group-item-action p-1 clearfix ' + gn + '" onClick="displayguestinfo(' + value.account_id + ');">' + name + ' ' + icon + '</a>';
            } );
            var diff = data.max - data.guestcount;
            for ( var i = 0; i < diff; i++ ) {
                c++;
                row += '<a href="#" class="list-group-item list-group-item-action p-1 clearfix ' + gn + '"><button class="btn btn-primary btn-sm" role="button" onClick="addnewguest(1);">Add New Guest</button></a>';
            }
            $( '#groupguests' ).html( row );
            if ( diff === 0 )
                group_full = true;
            else
                group_full = false;
            shownnonassignedguests();
            $( '#groupname' ).html( data.name );
            if ( data.organizer == "not assigned" )
                fullname = data.organizer
            else
                fullname = data.organizer.account_firstname + " " + data.organizer.account_lastname;
            row = "Group Organizer: <strong>" + fullname + "</strong><br>";
            if ( data.fieldcount > 0 ) {
                $.each( fields, function ( key, value ) {
                    var tempval = "'" + value.value + "'";
                    row += '<span>' + value.field_name + ' <a href="#" onClick="viewcustomfieldgroup(' + tempval + ');">' + value.value + '</a></span><br>';
                } );
            } else
                row += 'Custom field not assigned.';
            $( '#groupinformation' ).html( row );
            $( '#searchInput' ).val( '' ).focus();
        }
    } );
}

Я бы хотел, чтобы в главном списке всех гостей прокрутился выбранный гость из группы.Цвет фона меняется, когда гость выбран, но не прокручивается.Я надеюсь, что даю достаточно информации.