Sort council members by last name

by Haze32

HTML

<div class="staff">
    <div class="staff-person">
        <img src="/image.jpg">
        <div class="staff-person-info">
            <h3>John Gorden</h3><span class="job-title">adf asdf asdf asdf </span>
            <p>fdgsdfg sdfg sdfg sdfg sdfg sdfg sdfg sdf</p>
        </div>
    </div>
    <div class="staff-person">
        <img src="/image.jpg">
        <div class="staff-person-info">
            <h3>Jim Gabe Jorde</h3><span class="job-title">adf asdf asdf asdf </span>
            <p>fdgsdfg sdfg sdfg sdfg sdfg sdfg sdfg sdf</p>
        </div>
    </div><div class="staff-person">
        <img src="/image.jpg">
        <div class="staff-person-info">
            <h3>Jen Harper</h3><span class="job-title">adf asdf asdf asdf </span>
            <p>fdgsdfg sdfg sdfg sdfg sdfg sdfg sdfg sdf</p>
        </div>
    </div><div class="staff-person">
        <img src="/image.jpg">
        <div class="staff-person-info">
            <h3>Will Ballman</h3><span class="job-title">adf asdf asdf asdf </span>
            <p>fdgsdfg sdfg sdfg sdfg sdfg sdfg sdfg sdf</p>
        </div>
    </div>
</div>

JavaScript

// Function to sort staff by manual order
function sortStaffByManualOrder() {
    // Get the staff container
    const staffContainer = document.querySelector('.staff');
    if (!staffContainer) return;

    // Defined manual order of last names
    const manualOrder = ['Harper', 'Ballman', 'Gorden', "jeff"];

    // Roman numerals to ignore
    const romanNumerals = ['I', 'II', 'III', 'IV', 'V'];

    // Get all staff persons as an array
    const staffItems = Array.from(staffContainer.getElementsByClassName('staff-person'));

    // Extract last names from staff items
    const staffLastNames = staffItems.map(item => {
        const fullName = item.querySelector('h3').textContent.trim();
        const words = fullName.split(' ');
        let lastName = words.pop();
        if (romanNumerals.includes(lastName) && words.length > 0) {
            lastName = words.pop();
        }
        return { lastName, element: item };
    });

    // Check for names in staff not in manual order
    staffLastNames.forEach(({ lastName }) => {
        if (!manualOrder.includes(lastName)) {
            console.log(`Staff member with last name "${lastName}" is not in the manual order list`);
        }
    });

    // Check for names in manual order not in staff
    manualOrder.forEach(orderName => {
        const found = staffLastNames.some(({ lastName }) => lastName === orderName);
        if (!found) {
            console.log(`Name "${orderName}" from manual order is not found in staff`);
        }
    });

    // Sort staff items according to manual order
    const sortedItems = staffItems.sort((a, b) => {
        const nameA = a.querySelector('h3').textContent.trim();
        const nameB = b.querySelector('h3').textContent.trim();

        const wordsA = nameA.split(' ');
        const wordsB = nameB.split(' ');

        let lastNameA = wordsA.pop();
        let lastNameB = wordsB.pop();

        if (romanNumerals.includes(lastNameA) && wordsA.length > 0) {
           ...