Выбрать только элемент, который в данный момент зависает с помощью jquery, и переключить видимость следующего элемента?

$('.MathBox').after('<div class = "ypnLeftRight"><div class = "left-button">&laquo;</div><div class = "right-button">&raquo;</div></div>');

$('.right-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('.left-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

$('.MathBox , .ypnLeftRight').hover(function() {
  $('.ypnLeftRight').show();
}, function() {
  $('.ypnLeftRight').hide();
});
/*
  $('.MathBox , .ypnLeftRight').hover(function(){
    $(this).find('.ypnLeftRight').show();
  }, function(){
    $(this).find('.ypnLeftRight').hide();
  });*/

.MathBox {
  width: 100%;
  border: dashed 1px #dddddd;
  overflow: auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.ypnLeftRight {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  height: 1.5em
}

.ypnLeftRight>div:hover {
  background: rgba(0, 0, 0, 0.8);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "postContentItem">
  1<br/>
  <div class = "MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>text{This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>1<br/>
  <div class = "MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>
</div>