How to select adjacent element using jquery?

Question

I have two <textarea> and two <h4>, Also I have a function for counting the number of characters which are in the textarea and prints that number in the <h4>.

Now my problem is: The number of character is depends on both <textarea>s. I want to each counter be depends on its own <textarea>. How?

	var cmnt_length_color = ["#999", "#9b764f", "#9b764f", "#cf7721", "#cf7721", "#fe7a15", "#fe7a15", "#fe7a15", "#ea532b", "#ea532b"];

$("body").on('input', 'textarea', function() {
        el = $(this);
        var textarea_cmnt_id =  $(this).attr('id');
    	var textarea_cmnt_pure_id = textarea_cmnt_id.replace(/[^0-9]/g, '');
        if(el.val().length > 500){
            el.val( el.val().substr(0, 500) );
        } else {
            $("#char-numb-"+textarea_cmnt_pure_id+",#char-numb-edit-"+textarea_cmnt_pure_id).css({"color": cmnt_length_color[Math.floor(el.val().length/50)]});
            $("#char-numb-"+textarea_cmnt_pure_id+",#char-numb-edit-"+textarea_cmnt_pure_id).text(500-el.val().length+' remins characters');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <form id="form-843">
        <textarea id="textarea-843"></textarea>
        <h4 id="char-numb-843">500 remins characters</h4>
    </form>

    <form>
       <textarea id="textarea-edit-843"></textarea>
       <h4 id="char-numb-edit-843">500 remins characters</h4>
    </form>

Answer 1

you need to use .next() and .text() for <h4>

el.next('h4').text(value_you_need_here);

Simple Demo

Answer 2

Get the relative element after the textarea you're trying in by using jQuery's next() function. Refine your selection by specifying that you want the next h4 element by passing in a parameter to next('h1').

Consider this revised version of your program:

	var cmnt_length_color = ["#999", "#9b764f", "#9b764f", "#cf7721", "#cf7721", "#fe7a15", "#fe7a15", "#fe7a15", "#ea532b", "#ea532b"];

$("body").on('input', 'textarea', function() {
        el = $(this);
        var textarea_cmnt_id =  $(this).attr('id');
    	var textarea_cmnt_pure_id = textarea_cmnt_id.replace(/[^0-9]/g, '');
        if(el.val().length > 500){
            el.val( el.val().substr(0, 500) );
        } else {
            $(this).next('h4').css({"color": cmnt_length_color[Math.floor(el.val().length/50)]});
         // ^^^^^^^^^^^^^^^^^^
            $(this).next('h4').text(500-el.val().length+' remins characters');
         // ^^^^^^^^^^^^^^^^^^
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <form id="form-843">
        <textarea id="textarea-843"></textarea>
        <h4 id="char-numb-843">500 remins characters</h4>
    </form>

    <form>
       <textarea id="textarea-edit-843"></textarea>
       <h4 id="char-numb-edit-843">500 remins characters</h4>
    </form>