использовать динамическую функцию jQuery для более чем одного поля и div

Question

У меня есть код jQuery, который получает значение ввода текста и добавляет его значение в класс div.хотя следующий код работает нормально, я пытаюсь выяснить, как заставить эту функцию работать более динамично для более чем одного ввода текста и более чем одного деления, не копируя один и тот же сценарий для каждого ввода и деля снова и снова.

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-1').val();
    $("#myDiv_1").removeClass().addClass(value);

  }

  $('input.my-input-1').on('change keyup', function() {
    checkForInput(this);
  });

});

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-2').val();
    $("#myDiv_2").removeClass().addClass(value);

  }

  $('input.my-input-2').on('change keyup', function() {
    checkForInput(this);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Answer 1

Для каждого input можно использовать атрибут, значение которого представляет id из div

jQuery(document).ready(function($) {
  $('input.class-input').on('change keyup', function() {
    const $this = $(this);
    const value = $this.val();
    const divId = $this.data('for');
    $(`#${divId}`).removeClass().addClass(value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Answer 2

В случае, если вы не хотите иметь идентичные классы для элементов ввода. (Согласно вашему коду.) Надеюсь, это поможет.

jQuery(document).ready(function($){

        function checkForInput(elementClass,elementValue) {
          var inputNumber= elementClass.substr(elementClass.length-1);
          
         var divclass='#myDiv_'+inputNumber;
          
        $(divclass).removeClass().addClass(elementValue);
          
        }
      
        $('input.my-input-1').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
         
        });
      $('input.my-input-2').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
          
        });
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>