Toggle Class on Top Level Containing Division Using Data Attribute on Link

As the title of this thread suggests, I’m trying to toggle a class on a div using data attributes on the link.

I’ve added my basic html and js. I’ve gotten it to toggle the class, but I need it to toggle a different class depending on which link is hovered.

I’ve added my HTML and javascript below. If anyone can help me fill in the blanks, I would be extremely grateful.

    var switchData = $("[data-switch]");
    var breakoutClass = switchData.attr('data-switch');
    $('.js-breakout-switch').hover(function() {
        $(this).parents('.js-product-breakout').toggleClass('show-' + breakoutClass);
    });
<div class="product-breakout js-product-breakout">
    <section class="breakout-item">
        <p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="01" href="">View Part</a></p>
    </section>
    <section class="breakout-item">
        <p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="02" href="">View Part</a></p>
    </section>
    <section class="breakout-item">
        <p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="03" href="">View Part</a></p>
    </section>
</div>