How to change 'active' button with left and right arrow keys?

I have an 'active' button with a class of .btn-active

Since the website will be integrated into a real life prototype, the user can only navigate with the left and right arrow keys and enter key.

My question are:

1) How do I change the btn-active class from the first option in the first question to the first option in the second question after removing and adding of classes?

2) With the above concept taken into consideration, how do I navigate through the 4 button options with the left and right arrow keys with the jQuery code below?

The full code can be seen and understood here: http://ift.tt/2v6bIBF

<div class="qnbox qn1 qnbox-active">
    <h2>Message 1:</h2>
    <h4>"Hey lecturer, I would like to thank you for your ____________!"</h4>
    <button class="btn btn-active" data-messages="Care">Care</button>
    <button class="btn" data-messages="Hard Work">Hard Work</button>
    <button class="btn" data-messages="Dedication">Dedication</button>
    <button class="btn" data-messages="Perseverance">Perseverance</button>
</div> 

<div class="qnbox qn2">
    <h2>Message 2:</h2>
    <h4>"Thank you for being my __________!"</h4>
    <button class="btn" data-messages="Guidance">Guidance</button>
    <button class="btn" data-messages="Advisor">Advisor</button>
    <button class="btn" data-messages="Leader">Leader</button>
    <button class="btn" data-messages="Caretaker">Caretaker</button>
</div>


if (qn1.is(":visible")) {
    $('.btn-active').click(function () {
        var buttonMessage = $(this).data('messages');
        console.log(buttonMessage);
        //$('#messageOne').append(buttonMessage);
        $('#messageOne').text($(this).attr("data-messages"));
        qn1.removeClass('qnbox-active');
        qn2.addClass('qnbox-active');
    });
    $(function () {
        $(document).keyup(function (e) {
            switch (e.which) {
                case 13: // up key
                    console.log("Enter Key is Clicked!")
                    $(".btn-active").trigger("click");
                    break;
            }
        })
    });
}