ID - должен быть уникальным на странице. А у вас #itemImage повторяется в каждом блоке. Вы с ID обращаетесь как с class, так и замените ID на CLASS.
Код у вас не верный - это правда.
Для начала нужно установить событие click на button's:
document.querySelectorAll('.change-to-details').forEach(function (element) {
element.addEventListener('click', function (event) {
creditRes(event.target.parentNode.parentNode.parentNode.parentNode.parentNode);
});
});
Удалить из button's аттрибуты
onclick="creditRes();"
Да, да.. Предок долеко. В кнопку можно добавить data-аттрибут с уникальным номером. И делать, примерно, так:
var $li = document.querySelector('li#li-index-' + $attr_data_with_index);
creditRes вызывается с текущим li.
Ну и creditRes:
function creditRes($li) {
var creditGetImage = $li.querySelector(".itemImage").innerHTML;
document.getElementById("showItemImage").innerHTML = creditGetImage;
var creditGetItemTitle = $li.querySelector(".creditTitle").innerHTML;
document.getElementById("showCreditTitle").innerHTML = creditGetItemTitle;
var creditGetPrice = $li.querySelector(".mainprice").innerHTML;
var creditResultShow = (creditGetPrice / 2) / 3 + " грн/мес.";
var creditResultShowSecond = creditGetPrice / 3 + " грн/мес.";
document.getElementById("newprice").innerHTML = "При первом взносе 50% 3 платежа по: " + creditResultShow;
document.getElementById("newsecondprice").innerHTML = "Оплата 3 равными платежами по: " + creditResultShowSecond;
document.getElementById("cartPrice").innerHTML = "Стоимость: " + creditGetPrice + " грн.";
}
Скорее всего, вы хотели это!
PS. Код я не проверял. Это лишь набросок. Но в теории, код должен работать! Если всё ID заменить на классы!
Я про них: itemImage, creditTitle, mainprice, ...
UPD: запилил рабочий код:
https://jsfiddle.net/jq6e9epm/1/