UNy

Ты слайдер пытаешься сделать? Если да то посмотри как это реализовано у других, А вообще пропиши функцию реагирующую на клик и передающую id картинки на сервер. Например нажал на next, а next у тебя картинка с id=2, передал это значение на сервер, он нашел соответствующую картинку и отдал её назад.

обратите внимание на Elements и Element в классе и айдишнике. Может быть несколько элементов с одинаковым классов которые при .getElementsByClassName кладутся в массив, а айдишник должен быть уникальным.

Клиент нажал отправить, на сервере сделал приемник( хз на каком языке у тебя сервер:) ) принял запрос, записал данные в БД.

XMLHttpRequest уже староват) используйте fetch(работает с промисами).

function but(id) {

        fetch('/ajax', {method: 'POST',body:JSON.stringify({
                name:'vlad',
                id:id
            }),headers:{'content-type': 'application/json'}})
            .then(function (response) {
                alert(response.status); // 200

                return response.json();
            })
            .then(function (data) {
                alert(data.id);
                let elem = document.getElementById('h2o');
                elem.innerText = data.id;
            })
            .catch(alert);
    }

Вот мой пример изменения содержимого. В первом .then вы возвращаете return response.json(); А куда? Сделайте еще один then который принимает эти данные и работает с ними.