Find next element by class after an specific element in the entire code (jQuery)

Question

I need to do a jQuery script to mirror what I type in an <input> of class="a" to the next forward <input> of class="b", for every key pressed in the keyboard.

But I have some restrictions:

• No, unfortunately I can't change the HTML. It is a legacy code. The only thing I can do is add a jQuery script.

• No, it can't be a pure JavaScript code. It must be a jQuery code.

• Yes, I need to use .on() because the div that contains the inputs are created dynamically.

I have tried using .next(), .find(), .each(), .closest()... but I'm a beginner, so I don't know how to use them properly. Probably it is something using these functions.

<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->

$(document).on('keyup', '.a', function (ev) {
    //1 - get value in input and store in a variable
    //2 - search for the next forward input of class="b"
    //3 - set the variable to the value of input
});

IMPORTANT: Please note that the code isn't exactly like this. Between one input and the other, there is some code, and they aren't event in the same parent div. The only thing I cant assure is that the next input is after, in the code, ant that it'll be inside a div.

Answer 1

^[1] To refer to the input you typed in you need to use $(this)

^[2] To get its value use .val()

^[3] To select the next .b element you need to use .next('.b')

$(this).next('.b').val($(this).val()) and I prefer to use input event instead of keyup

$(document).on('input', '.a', function (ev) {
    //1 - get value in input and store in a variable
    var GetThisValue = $(this).val();
    //2 - search for the next forward input of class="b"
    //3 - set the variable to the value of input
    $(this).next('.b').val(GetThisValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>

^{[Other Selectors to select .b]}

• $(this).parent().find('.b')

• $(this).closest('div').find('.b')

^{Snippet up to OP update}

$(document).on('input', '.a', function (ev) {
    //1 - get value in input and store in a variable
    var GetThisValue = $(this).val();
    //2 - search for the next forward input of class="b"
    //3 - set the variable to the value of input
    $(this).parent().nextAll('div:has(.b):first').find('.b').val(GetThisValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" class="a" />
</div>
<div> any code </div>
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<div> any code </div>
<div>
    <input type="text" class="b" />
</div>
<div> any code </div>
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->

Answer 2

Seeing how jQuery is pure JavaScript, one might argue that this is also "jQuery code" :D

1. on an input event, get the cousin input by getting the parent element's sibling (aunt element)
2. if the aunt isn't a <div> keep searching, until finding the next <div>
3. search under aunt for the desired input/class combo (i.e. input.b)
4. set value of that cousin element to the value of the input.a that is being typed in

document.addEventListener('input', event => {
  if (event.target.classList.contains('a')) {
    let aunt=event.target.parentElement.nextElementSibling
    while(aunt && aunt.nodeName!='DIV'){
      aunt=aunt.nextElementSibling;
    }
    const cousin = aunt.querySelector('input.b');
    cousin.value = event.target.value;
  }
});

<!-- any code -->
<div>
  <input type="text" class="a" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="b" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="a" />
</div>
<!-- any code -->
<div>
  <input type="text" class="b" />
</div>
<!-- any code -->
<div>
  <input type="text" class="a" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="b" />
</div>