Переход к следующему узлу по клику ⇐ Jquery

[Anonymous]

Я редактирую скрипт Tampermonkey, который берет элементы из DOM и создает из них новый элемент, чтобы добавить их в другую часть страницы. Исходный элемент имеет кнопку X, которая изменяет отображаемое значение элемента div (на style="display: none")

• Element 0 index 0
  
  

$(document).ready(function newDiv() {
var newElementText = document.querySelector('#alertTable li');
var newElementImg = document.querySelector('#alertTable li img');
var newElementClose = document.querySelector('.x-close');

var newElementCSS = `

#scriptDiv img {
width: 500px;
}
#scriptDiv li {
color: #f8f8f8;
}

`;

const HTMLElement = `

${newElementText}
${newElementImg}
${newElementClose}

`;

$('.DOMheader').prepend(HTMLElement);
});

Проблема с этим кодом заключается в том, что иногда элемент

• DOM содержит более одного элемента, например, и исходный код обнаруживает и взаимодействует только с первый экземпляр элементов, которые он находит с помощью querySelector (логически)
• Element 0 index 0
  
  
• Element 1 index 1
  
  
• Element 2 index 2
  
  

Я хотел бы изменить исходный код, чтобы он прослушивал щелчок по элементу .x-close и отображал информацию о следующем элементе в переменных newElement. Как этого можно было достичь? Исходный код включает это для «закрытия» элемента DOM при нажатии кнопки закрытия внедренного элемента
var DOMClose = document.querySelector('#alertTable.x-close');
var ScriptClose = document.querySelector('#scriptDiv.x-click');

ScriptClose.addEventListener('click', function () {
DOMClose.click();
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... e-on-click