I have developed an application that features a list displayed as shown below:
https://i.stack.imgur.com/BxWF2.png
Upon clicking each tick mark, the corresponding Book name is added to a textbox below. I desire the tick mark to be replaced by a cross symbol which allows users to remove it.
Currently, when I click on any of the tick marks, only the first item in the list changes to a cross like this:
https://i.stack.imgur.com/tftkk.png
However, I want the tick next to the specific book to change into a cross, not just the first one at the top of the list.
I understand that this issue stems from the need for the items to be treated as class elements rather than ID tags, as using an ID tag always selects the first item with that particular ID. However, I am unsure about how to incorporate this change into my code even after attempting to wrap the tick and cross icons in divs with class names.
The JavaScript code involved looks like this:
function saveToList(event) {
if (event.which == 13 || event.keyCode == 13) {
function saveToFB(bookName) {
var user = firebase.auth().currentUser;
var bookList = firebase.database().ref('users/' + uid + '/');
var uid = user.uid;
// This will save data to Firebase
bookList.push({
book: bookName
});
};
// This part contains JS responsible for creating the lists based on Firebase data, divided into three lists each holding up to 10 books.
function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
for (var i = 0; i < 10 && i < list.length; i++) {
// Creates the list item by adding the firebase object + genLinks which contains the select, remove, and delete icons.
lis += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 10; i < 20 && i < list.length; i++) {
lis2 += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 20; i < 30 && i < list.length; i++) {
lis3 += '<li data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
// Populates the HTML lists with the JS list items
document.getElementById('bookList').innerHTML = lis;
document.getElementById('bookList2').innerHTML = lis2;
document.getElementById('bookList3').innerHTML = lis3;
};
...
A helpful suggestion was made to use getElementsByClassName(), however, no explanation was provided on how to implement it. If anyone could offer some guidance or advice on this matter, I would greatly appreciate it.
Thank you, G