getting the same random index for 2 arrays

I am building a flashcard web app and I am trying to make a random japanese character appear but at the same time also have a english value to the character.

So I have two arrays (one English and one Japanese) and I have, with the help of someone on here managed to get the random Japanese letter to be displayed.

my question is how do I get the same index value for the english array to check an answer against without breaking the rest of my code?

 // kana indexes 
var kanaArray = ["あ","い","う","え","お","か","き","く","け","こ","さ","し","す","せ","そ","た","ち","つ",
"て","と","な","に","ぬ","ね","の","は","ひ","ふ","へ","ほ","ま","み","む","め","も","や","ゆ","よ","ら","り","る",
"れ","ろ","わ","を","ん"]

var kanaEng = ["a","i","u","e","o","ka","ki","ku","ke","ko","sa","shi","su","se","so","ta","chi","tsu",
"te","to","na","ni","nu","ne","no","ha","hi","fu","he","ho","ma","mi","mu","me","mo","ya","yu","yo","ra","ri","ru",
"re","ro","wa","wo","n"]

let getRandomKana = () => kanaArray[Math.floor(Math.random()*kanaArray.length-1)];

let getAnswerVal = kanaEng[Math.floor(Math.random()*kanaEng.length-1)];

//logic

var started = false;
var level = 0;
let kanaPassed = [];

// start and switch buttons 
$(document).ready(function(){
    $(".startBtn").click(function(){
        started = true
        $('.startBtn').css("visibility", 'hidden');
        $('.switchBtn').css("visibility", 'visible');
        $('h3').text(getRandomKana());
        $('h3').css("visibility",'visible');
        console.log(started)
    })
});

$('.switchBtn').click(function(){
    $('h3').text(getRandomKana());
});

// check answer 
$('.submit').click(function(){
    console.log(getAnswerVal);
    if($('#answerBox').val()===getAnswerVal){
        $('card').css('background-color','red');
    }
});