Автоматическая итерация jQuery в именах селекторов

Привет, укладчики, я уверен, что мы можем сделать этот код короче. Есть идеи? Очень признателен!

У меня есть список UL с A в нем, и мне нравится анимировать определенные части текста в зависимости от того, какой из списков я навел. Я заставил его работать, как показано ниже, но этот фрагмент кажется странно неэффективным.

        $( "a#a1" )
          .mouseover(function() {
            $( "span#span1" ).addClass('animated rubberBand');
          })
          .mouseout(function() {
            $( "span#span1" ).removeClass('animated rubberBand');
          });
        $( "a#a2" )
          .mouseover(function() {
            $( "span#span2" ).addClass('animated rubberBand');
          })
          .mouseout(function() {
            $( "span#span2" ).removeClass('animated rubberBand');
          });
        $( "a#a3" )
          .mouseover(function() {
            $( "span#span3" ).addClass('animated rubberBand');
          })
          .mouseout(function() {
            $( "span#span3" ).removeClass('animated rubberBand');
          });

         etc...

HTML:

<ul class="display-posts">

<li class="listing-item"><a class="titledp" id="a1" href="">
<span id="span1" class="fa fa-angle-right arrowkariera"></span>POST1</a></li>

<li class="listing-item"><a class="titledp" id="a2" href=""><span id="span2" class="fa fa-angle-right arrowkariera"></span>POST2</a></li>

<li class="listing-item"><a class="titledp" id="a3" href=""><span id="span3" class="fa fa-angle-right arrowkariera"></span>POST3</a></li>

<li class="listing-item"><a class="titledp" id="a4" href=""><span id="span4" class="fa fa-angle-right arrowkariera"></span>POST4</a></li>

<li class="listing-item"><a class="titledp" id="a5" href=""><span id="span5" class="fa fa-angle-right arrowkariera"></span>POST5</a></li>

<li class="listing-item"><a class="titledp" id="a6" href=""><span id="span6" class="fa fa-angle-right arrowkariera"></span>POST6</a></li>

<li class="listing-item"><a class="titledp" id="a7" href=""><span id="span7" class="fa fa-angle-right arrowkariera"></span>POST7</a></li>

</ul>

Как вы можете видеть, мне нужно перенести число A в селектор SPAN, потому что я хочу, чтобы анимировался только этот конкретный SPAN, а не все из них.