Как вы можете использовать javascript, чтобы похожие кнопки в повторяющемся списке влияли только на элементы в этом списке?

Question

У меня есть код php, который повторяет список из базы данных. В каждом списке одни и те же элементы с разным содержанием. Каждый список имеет кнопку редактирования, отмены и сохранения, а также поля ввода только для чтения, в которых отображается значение, полученное из базы данных. Нажатие на кнопку редактирования скрывает его и открывает кнопки отмены и сохранения, а также делает поля ввода доступными для записи. Нажатие кнопки отмены или сохранения отменяет это. Кнопка сохранения отправляет данные формы для обработки.

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

HTML блок:

<ul class="productList" name="prodUl">

<?php

    $sql = "SELECT img,name,price,qty,code,details,prod_id FROM products WHERE seller_id='".$acctID."'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
      // output data of each row
      while($row = $result->fetch_assoc()) {
?>

            <li name="prodLi">
                    
                <a href="SellerPage.php?code=<?php echo $row["code"]; ?>" onclick="return confirm('This item will be deleted permanently')">Remove Item</a>
                <?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['img'] ).'" id="productImg">'; ?>
                <form method="post" action="sProdImgProcess.php" enctype="multipart/form-data" name="sProdImg">
                <input type="file" accept="image/*" name="pProfPic" id="pImg"  />
                <input type="hidden" name="prodID2" value="<?php echo $row['prod_id']; ?>">
                <button type="submit" class="pImgUpld" name="pImgUpld" id="upldAcctB2">Upload</button>
                </form>
                <form method="post" action="sellerProdProcess.php" enctype="multipart/form-data" name="sProdForm">
                <input type="hidden" name="prodID" value="<?php echo $row['prod_id']; ?>">
                <div class="productDiv1">
                    <div class="productDiv2">
                        <input type="text" value="<?php echo $row['name'];?>" name="pname" readonly>
                        <br>
                        <input type="number" step=".01" value="<?php echo $row['price']; ?>" name="pprice" class="price" readonly>
                        <br>
                        <input type="number" value="<?php echo $row['qty'];?>" name="pqty" readonly>
                    </div>
                </div>
                <input type="text" value="<?php echo $row['details'];?>" name="pdetails" id="<?php echo $row['prod_id']; ?>" class="details"  size="50" readonly>
                <button type="submit" class="prodSave" name="pSubmit">Save</button>
                <button class="prodCancel" name="pCncl">Cancel</button>
                <button class="prodEdit" name="pEdt">Edit</button>
                </form>
            </li>
            <?php
                }
                }

                $conn->close(); 
            ?>
        </ul>

Javascript блок:

<script>
(function(W) {
  var D, form, formImg2, prodUl, bts, ipt;

  function init() {
    D = W.document, previous = [];
    form = D.getElementsByName('sProdForm')[0];
    formImg2 = D.getElementsByName('sProdImg')[0];
    prodUl = D.getElementsByName('prodUl');
    bts = prodUl[0].getElementsByTagName('button');
    ipt = prodUl[0].getElementsByTagName('input');
    form.addEventListener('submit', save, false);
    for (var i = 0; i < bts.length; i += 4) {
      bts[i + 2].addEventListener('click', cancel, false);
      bts[i + 3].addEventListener('click', edit, false);
    }
  }

  function save() {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    var l = ipt.length;
    while (l--) {
      ipt[l].readOnly = true;
    };
    previous = [];
    //send your info here 
  }

  function edit(e) {
    e.preventDefault();
    form.classList.add('invert');
    formImg2.classList.add('invert');
    var l = ipt.length;
    while (l--) {
      previous[l] = ipt[l].value;
      ipt[l].readOnly = false;
    }
  }

  function cancel(e) {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    e.preventDefault();
    var l = ipt.length;
    while (l--) {
      ipt[l].value = previous[l];
      ipt[l].readOnly = true;
    }
  }
  W.addEventListener('load', init, false);
})(window)
</script>

CSS блок:

button.prodSave {
  display: none;
}

button.prodCancel {
  display: none;
}

button.prodEdit {
  display: inline-block;
}

form.invert>button.prodSave {
  display: inline-block;
}

form.invert>button.prodCancel {
  display: inline-block;
}

form.invert>button.prodEdit {
  display: none;
}

#pImg {
  display: none;
}

#upldAcctB2 {
  display: none;
}

form.invert>#pImg {
  display: inline-block;
}

form.invert>#upldAcctB2 {
  display: inline-block;
}

Answer 1

У вас есть несколько форм с одинаковым именем, но ваша функция инициализации получает только первую форму:

form = D.getElementsByName('sProdForm')[0];

Вы можете изменить это на l oop в каждой из форм, например:

forms = D.getElementsByName('sProdForm');
for (var i = 0; i < forms.length; i++) {
    var form = forms[i]
    //your code here
}

Answer 2

Возможно, вам потребуется добавить уникальный идентификатор для каждого элемента li, а затем использовать этот id для определения button s и input s.