Как копировать текст на многих пролетах

Question

То, что вы вводите в поле ввода, должно быть воспроизведено ниже, на каждом интервале.

Я могу сделать это с кодом de js ниже, но для этого мне нужно сделать один и тот же код и снова для каждого промежутка, который должен быть закончен. Я пытался использовать один и тот же класс «один» на каждом отрезке, но работает только на первом отрезке. Мне нужно создать новый класс для каждого промежутка и некоторый код для каждого из этих промежутков.

Я хочу знать способ репликации одного и того же текста во многих множествах без такого большого количества кода. Как?

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.one');
        result.innerHTML = this.value;
    });
    
    var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelector('span.two');
        result.innerHTML = this.value;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>

Answer 1

Используйте querySelectorAll для выбора всех элементов одного селектора css. Пожалуйста, используйте следующий код:

Пожалуйста, используйте эту ссылку, чтобы узнать больше о querySelectorAll

var rep = document.getElementById('A');
    rep.addEventListener('input', function() {
        var result = document.querySelectorAll('span');
        for(const res of result) {
          res.innerHTML = this.value;
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>