I'm trying to click on either the 0th index of the node list, and move that item down after its next sibling. Or the 2nd index and move that above its previous sibling which I've working for the first go:

https://i.gyazo.com/8918c506d526a8dd2f77602c65d68c2a.mp4

However once I've clicked these two elements I believe their positions as far as my JavaScript is concerned is still the same. So I end up getting a console error:

Uncaught TypeError: Cannot read properties of null (reading 'after')

This is my JS currently. As you can see I'm moving the elements up and down depending on index:

export const reviewsUtil = () => {
    const allReviewCards = document.querySelectorAll('.reviews__cardInner');
const allDescriptions = document.querySelectorAll('.reviews__descWrapper');

allReviewCards.forEach((e, index) => {
    e.addEventListener('click', (review) => {
        if (review.target.classList.contains('inactive')) {

            //Get's all reviews that aren't the clicked and hides them
            allDescriptions.forEach(desc => {
                desc.classList.add('reviews__infoInactive');
                desc.style.removeProperty('display');
            });

            //Loops through all instances and removes the active class
            allReviewCards.forEach(e => {
                e.classList.remove('active');
                e.classList.add('inactive');
                e.nextElementSibling.classList.remove('reviews__infoActive');
            })

            //Set's clicked as active
            review.target.style.removeProperty('display');
            review.target.classList.remove('inactive');
            review.target.classList.add('active');

            //Set's clicked review text as active
            e.nextElementSibling.classList.add('reviews__infoActive');
            e.nextElementSibling.style.removeProperty('display');

            if (index === 0) {
                e.parentElement.nextElementSibling.after(review.target.parentElement);
            } else if (index === 2) {
                index = 1;
                e.parentElement.previousElementSibling.before(review.target.parentElement);
            }
            
        }
    })
  })
}

export default reviewsUtil;

What I'd like to try and achieve is potentially having an updated list returned to me once the DOM has been manipulated. Is there a way I can monitor this or is my approach somewhat off?

Any help greatly appreciated.