Как увеличить счетчик с созданного элемента с помощью кнопки

Question

Попытка выяснить, как заставить счет работать, после того, как пользователь вошел в фильм и отправил его, чтобы элемент был создан в таблице.

Там будет кнопка в созданном элементе.Как получить, чтобы кнопка make увеличивала счетчик, который также отображается в созданном элементе.

class Movie {
    constructor(title, year, cost) {
        this.title = title;
        this.year = year;
        this.cost = cost;
    }
}

class UI {
    createMovie(movie) {
        const list = document.getElementById('movie-list');
        let row = document.createElement('tr');
        row.innerHTML = `
            <td>${movie.title}</td>
            <td>${movie.year}</td>
            <td>${movie.cost}</td>
            <td class="count"><td>
            <input type="submit" value="Watched" class="btn2"></input>
            <td><a href="#" class="delete">X</a></td>
        `;
        list.appendChild(row);
    }

    getMovie() {

    }

    addMovieWatchCount() {
        document.querySelector('.btn2').addEventListener('click', function(e) {
            let count = 0
            let numOfMovie = document.querySelector('.count').innerHTML = count;
            numOfMovie.appendChild(count);
        });
    }

    deleteMovie(target) {
        if(target.className === 'delete') {
            target.parentElement.parentElement.remove();
        }
    }

    clearMovieFields() {
        document.getElementById('movie').value = '';
        document.getElementById('year').value = '';
        document.getElementById('cost').value = '';
    }
}

//Event Handling

document.getElementById('form').addEventListener('submit', function(e) {
    const title = document.getElementById('movie').value;
    const year = document.getElementById('year').value;
    const cost = document.getElementById('cost').value;
    const movie = new Movie(title, year, cost);
    const ui = new UI();
    ui.createMovie(movie);
    ui.clearMovieFields();
    e.preventDefault();
});

document.getElementById('movie-list').addEventListener('click', function(e) {
    const ui = new UI();
    ui.deleteMovie(e.target);
    e.preventDefault();
});

Пользователь нажимает кнопку «Просмотрено» в созданном элементе «input» в таблице, и он должен увеличиватьсясодержимое созданного элемента th в 1 и т. д.

Answer 1

Попробуйте сгенерировать уникальный класс для каждого фильма для каждого <tr> (например, btn2-${movie.title}), добавленного в createMovie, а затем также принять параметр фильма в addMovieWatchCount, чтобы специально привязать прослушиватель щелчков к этой конкретной кнопке вместотолько первый соответствующий элемент.