JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quotes" style="display:none;">Москва и Московская область</div>
<div class="quotes" style="display:none;">Санкт-Петербург и Ленобласть</div>
<div class="quotes" style="display:none;">Абаза,(Республика Хакасия)</div>
<div class="quotes" style="display:none;">Абакан,(Республика Хакасия)</div>
<div class="quotes" style="display:none;">Абдулино,(Оренбургская область)</div>
<div class="quotes" style="display:none;">Абинск,(Краснодарский край)</div>
<div class="quotes" style="display:none;">Агидель,(Республика Башкортостан)</div>
<div class="quotes" style="display:none;">Агинское,(Забайкальский край)</div>
<div class="quotes" style="display:none;">Агрыз,(Республика Татарстан)</div>
<div class="quotes" style="display:none;">Адыгейск,(Республика Адыгея)</div>
<div class="quotes" style="display:none;">Азнакаево,(Республика Татарстан)</div>
<div class="quotes" style="display:none;">Азов,(Ростовская область)</div>
<div class="quotes" style="display:none;">Ак-Довурак,(Республика Тыва)</div>


<input type="number" value="0" min="0" max="10">

JavaScript

document.querySelector('input').addEventListener('input', (e) => {
  console.log(e.target.value)

  const quotes = document.querySelectorAll('div.quotes')

  for (let i = 0; i < quotes.length; i++) {
    quotes[i].style.display = i < e.target.value ? 'block' : 'none'
  }
})