Как число массива привязать к определенной карточке в HTML, для создания фильтра?

Question

[12Vadim12]

<div class="watch__anceta  filter-man">
                  <div class="watch__times">
                    <span class="time__first">part-time</span>
                    <span class="time__second">full-time</span>
                  </div>
                  <img src="img/third/third1.jpg" style="margin-bottom:20px;" alt="1">
                  <h4 class="watch__name">Сергей Васильев</h4>
                  <h5 class="watch__profession">QA-тестировщик </h5>
                  <div class="watch__time-work">Опыт: более 5 лет</div>
                  <div class="watch__price">Зарплата: от 1000 €</div>
                  <a href="#" class="third-hover">Посмотреть справку</a>
                </div>
                <div class="watch__anceta  filter-woman">
                  <div class="watch__times">
                    <span class="time__first">part-time</span>
                    <span class="time__second">full-time</span>
                  </div>
                  <img src="img/third/third2.jpg" style="margin-bottom:20px;" alt="1">
                  <h4 class="watch__name">Татьяна Петрова</h4>
                  <h5 class="watch__profession">QA-тестировщик </h5>
                  <div class="watch__time-work">Опыт: более 5 лет</div>
                  <div class="watch__price">Зарплата: от 1500 €</div>
                  <a href="#" class="third-hover">Посмотреть справку</a>
                </div>
                <div class="watch__anceta filter-all  filter-man">
                  <div class="watch__times">
                    <span class="time__first">part-time</span>
                    <span class="time__second">full-time</span>
                  </div>
                  <img src="img/third/third3.jpg" style="margin-bottom:20px;" alt="1">
                  <h4 class="watch__name">Сергей Васильев</h4>
                  <h5 class="watch__profession">QA-тестировщик </h5>
                  <div class="watch__time-work">Опыт: более 5 лет</div>
                  <div class="watch__price">Зарплата: от 1000 €</div>
                  <a href="#" class="third-hover">Посмотреть справку</a>
                </div>

  <div class="third__filter-item">
                  <label for="pay" class="third__filter-label-pay">Зарплата</label>
                  <input type="number" class="third__filter-from" id='payInput' placeholder="от">
                  <input type="number" class="third__filter-to" id="payInput2" placeholder="до">
                </div>

const priceGet = Array.from(document.querySelectorAll('.watch__price'), item => parseInt(item.textContent.match(/\d+/)));
  const payInput = document.getElementById('payInput').value;
  const payInput2 = document.getElementById('payInput2').value;
  const watchAnceta = document.querySelectorAll('.watch__anceta');
  if(payInput >= priceGet || priceGet >= payInput2){
    watchAnceta.forEach(item=>{
      item.classList.add('hide')
    })
  }
})

Answer 1

[Чипекве]

const salaryFilter = document.querySelector('.third__filter-item');
const salaryFilterFrom = salaryFilter.querySelector('.third__filter-from');
const salaryFilterTo = salaryFilter.querySelector('.third__filter-to');
const cvBlocks = document.querySelectorAll('.watch__anceta');

salaryFilter.addEventListener('input', filterBySalary);

function filterBySalary() {
    cvBlocks.forEach(cvBlock => {
        const salary = +cvBlock.querySelector('.watch__price').textContent.match(/\d+/);     
        const isInRange = salary >= +salaryFilterFrom.value && salary <= +salaryFilterTo.value;
        cvBlock.classList.toggle('hide', !isInRange);
    })
}