Как по очереди вызывать значение массива по клику?

Нужно по клику на каждую кнопку, присваивать для anime: easing: easingNames[e]. То-есть нужно что бы на каждую кнопку, вызывался элемент по очереди. https://jsfiddle.net/p0ghrzL7/13/

<div class="items__content items--in">
  <button>Quad</button>
  <button>Cubic</button>
  <button>Quart</button>
  <button>Quint</button>
  <button>Sine</button>
  <button>Expo</button>
  <button>Circ</button>
  <button>Back</button>
  <button>Bounce</button>
</div>

<div class="shape__box">
  <div class="box__row box__row--1">
    <div class="shape shape--other"></div>
  </div>
</div>

.shape {
  width: 50px;
  height: 50px;
  margin-right: 20px;

  border-radius: 0;
  background-color: #000;
}

const easingNames = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeOutQuad', 'easeOutCubic', 'easeOutQuart', 'easeOutQuint', 'easeOutSine', 'easeOutExpo', 'easeOutCirc', 'easeOutBack', 'easeInBounce', 'easeInOutQuad', 'easeInOutCubic', 'easeInOutQuart', 'easeInOutQuint', 'easeInOutSine', 'easeInOutExpo', 'easeInOutCirc', 'easeInOutBack', 'easeInOutBounce', 'easeOutBounce', 'easeOutInQuad', 'easeOutInCubic', 'easeOutInQuart', 'easeOutInQuint', 'easeOutInSine', 'easeOutInExpo', 'easeOutInCirc', 'easeOutInBack', 'easeOutInBounce']
const buttonFunction = document.querySelectorAll('button')
const shapeOther = document.querySelector('.shape--other')

for (let i = 0; i < buttonFunction.length; i++) {
  buttonFunction[i].addEventListener('click', function() {
    for (let e = 0; e < easingNames.length; e++) {
      const animationOther = anime({
        targets: shapeOther,
        translateX: [0, 300],
        direction: 'alternate',
        easing: easingNames[e]
      })
      buttonFunction[i] = animationOther.play
    }
  })
}