Как сделать функцию на два элемента?

Question

[AnnaPolo]

написала скрипт эмуляции проверки. На первом элемента все работает, на втором - нет.
Как написать, чтобы работало для любого количества одинаковых полей?

<div class="form">
      <div class="form__field">
        <div class="form__field-image form__field-upload"></div>
        <div class="form__field-wrapper">
          <label class="upload js-random" for="upload">Загрузите скан страницы с фотографией</label>
          <input id="upload" class="form__field-text">
          <span class="form__field-span">Размер файла не более 5Мб</span>
        </div>
        <div class="form__field-blank"></div>
      </div>

      <div class="form__field">
        <div class="form__field-image form__field-upload"></div>
        <div class="form__field-wrapper">
          <label class="upload js-random" for="upload2">Страница с пропиской</label>
          <input id="upload2" class="form__field-text">
          <span class="form__field-span">Размер файла не более 5Мб</span>
        </div>
        <div class="form__field-blank"></div>
      </div>

<code lang="css">
.form__field {
  display: flex;
  align-items: center;
  margin: 30px 0px; }
  .form__field-image {
    margin-right: 20px;
    background-color: #fff;
    width: 40px;
    height: 40px; }
  .form__field-upload {
    background-image: url("../images/upload.svg");
    background-position: center;
    background-repeat: no-repeat;
    display: block !important; }
  .form__field-wrapper {
    display: flex;
    flex-direction: column;
    font-family: sans-serif; }
  .form__field-text {
    visibility: hidden; }
  .form__field-span {
    color: rgba(33, 33, 33, 0.6);
    font-size: 12px;
    padding: 5px 0px; }
  .form__field-blank {
    margin-left: 15px; }
  .form__field-ok {
    background-image: url("../images/ok.svg");
    background-position: center;
    background-repeat: no-repeat;
    display: block !important; }

.upload {
  margin: 0;
  cursor: pointer; }
  .upload:hover {
    text-decoration: underline; }

.checked {
  color: #00FF00; }

.canceled {
  color: #FF0000; }
</code>

let func = {
    jsRandomFunction() {
      let random = document.getElementsByClassName('js-random');
      let stateOfProcess = document.getElementsByClassName('form__field-blank');
      let image = document.getElementsByClassName('form__field-image');

      random[0].onclick = () => {


        document.querySelectorAll('.form__field').forEach(function(wrapper) {
          let random_boolean = Math.random() >= 0.5;
          console.log(random_boolean);

          if (random_boolean >= 0.5) {

            stateOfProcess[0].classList.add('checked');
            stateOfProcess[0].classList.remove('canceled');
            stateOfProcess[0].innerHTML = "<span>Проверено</span> ";
            image[0].style.display = 'none';
            image[0].classList.add('form__field-ok');
            image[0].classList.remove('form__field-upload');


          } else {
            stateOfProcess[0].classList.add('canceled');
            stateOfProcess[0].classList.remove('checked');
            stateOfProcess[0].innerHTML = "<span>Отклонено</span> ";
            image[0].style.display = 'none';
            image[0].classList.add('form__field-upload');
            image[0].classList.remove('form__field-ok');

          }
        });

      }
    }
};

$(function () {
    app.init();
});

Answer 1

[Талян]

Сократив ваш код до такого, проверил. Всё работает.

document.querySelectorAll('.form__field').forEach(function(wrapper) {
          let random_boolean = Math.random() >= 0.5;
          console.log(random_boolean);

          if (random_boolean >= 0.5) {
			console.log(wrapper);
            wrapper.classList.add('checked');
            wrapper.classList.remove('canceled');
            wrapper.innerHTML = "<span>Проверено</span> ";


          } else {
		  console.log(wrapper);
            wrapper.classList.add('canceled');
            wrapper.classList.remove('checked');
            wrapper.innerHTML = "<span>Отклонено</span> ";

          };
		  });

Что такое в вашем коде processState и т.д. понятия не имею.

Либо сначала проверяйте, что сюда скидываете,, задавая вопрос, либо скидывайте осознанно только те участки кода, которые в данном контексте что-то решают.
Думаю для решения вопроса 50% вышеописанного можно выкинуть вообще, чтобы никто за вас недодумывал, что там творится вообще.

В идеале - суйте код в Codepen, проверив его самостоятельно перед отправкой, а не тупо - закинули туда CSS, HTML, JS - а дальше "пофиг - на тостере разберутся же".