ordinalize input-group-addon based on input value in bootstrap 3

Question

Consider the following HTML snippet:

<div class="input-group">
    <div class="form-group">
        <div class="controls">
            Rank: <input class="form-control" name="myrank" id="myrank" type="number" value="1">
        </div>
    </div> <span class="input-group-addon">st</span>

</div>

Here I want my Rank to be displayed as 1st, 2nd, 3rd, 4th & so on. so I would like to update span.input-group-addon 's html based on value from #myrank . so far I am able to detect the change & get the value like this:

function ordinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}


$(function (){
  $('input[type="number"]').on('input', function(e) {
    var rank_ordinal = ordinal(this.value);
    //how do I get to the sibling span from instance of 'this'?
    // something like this $(this).parent().parent().parent().next()?
  });
});

Basically, I am looking for a selector to traverse the DOM, so I can get to span.input-group-addon from this as page can have multiple inputs, so I want to update value where user made the change. any pointers?

Answer 1

You can get that span by,

 $('input[type="number"]').on('input', function(e) {
    var rank_ordinal = ordinal(this.value);
    var $span= $(this).closest('div.form-group').next('span.input-group-addon');
  });

DEMO