Использование кнопки Click для обновления значений, возвращенных из Firestore в For Loop

Question

В настоящее время у меня есть базовый сайт CRUD, над которым я недавно начал работать, чтобы перечислить ряд продуктов и соответствующие цены.Мои навыки не самые лучшие, но я борюсь за хорошую борьбу и хотел бы получить некоторую помощь / руководство с тем, чего я пытаюсь достичь.

У меня есть данные, хранящиеся в базе данных Firestore, и я их извлекаю ипоказано в списке.Чтобы отобразить его, я добавляю в массив значения из моей подсборки, а затем использую цикл for для циклического прохождения и извлечения каждого значения и отображения его с помощью строки шаблона html.Я решил, что, поскольку у меня есть аспект создания и отображения этого прилично, я хотел бы добавить кнопку (или в моем случае значок), которая позволила бы мне редактировать каждое возвращаемое значение.

    const shelf = doc.data();
    doc.ref.collection("products").get().then((Snapshot) => {
        const products = Snapshot.docs.map(doc => doc.data());


        // start of for loop
        for(let product of products){

        // start of template string inside backticks
        const li = `
            <p><div>${product.name} <div class="right"><font class=pink-text>Price:</font> $${product.price}  <a href="#" class="grey-text modal-trigger" data-target="modal-priceedit"><i class="material-icons">create</i></a></div></div></p>
        `;
        // end of template string inside backticks  

        html += li;                 


        // start of edit price section
        let price = product.price;                  

        const priceeditForm = document.querySelector('#priceedit-form');
        priceeditForm.addEventListener('submit', (e) => {
          e.preventDefault();

            console.log("Document with ID: ", doc.id);
            doc.ref.collection("vendors").doc(price)get().then((Snapshot) => {
                const priceedit = Snapshot.docs.map(doc => doc.data());
             price: priceeditForm['price'].value

            }).then(() => {
            // close the signup modal & reset form
            const modal = document.querySelector('#modal-priceedit');
            M.Modal.getInstance(modal).close();
            priceeditForm.reset();
          }).catch(err => {
            console.log(err.message);
          });
        });
        //end of edit price section 


        }
       // end of for loop           


        productList.innerHTML = html;           
        });

Мне бы хотелось, чтобы при щелчке по значку всплывала модель с единственными полями ввода цены, и я могу ввести новую цену и отправить ее, что приведет к обновлению значения в базе данных.

Я буду очень благодарен всем, кто может мне помочь с этим.Заранее спасибо.

Выходное изображение