Multiple sliders with JQuery with arrays

Question

I am trying to build a slider that changes images depending on the region one clicks on a map. I want to use arrays to store images in the js file, not to list them in the HTML. However, the console reports "imageArray[imageIndex]:1 GET http://localhost:8000/imageArray[imageIndex] 404 (File not found)"

HTML

<div class="container">
<img id="mainImage" src="Photos/OG/P1000609.JPG" style="width:100%">
<button onClick="changeImage()">next</button>

JQuery

var imageArray = ["Photos/OG/P1000389.jpg", "Photos/OG/P1000409.jpg","Photos/OG/P1000589.jpg"];
var imageIndex =0;

function changeImage(){
$("#mainImage").attr("src", "imageArray[imageIndex]");
imageIndex ++;
sliderLenght = imageArray.lenght;
if (imageIndex> sliderLenght) {imageIndex = 0}
};


function changeArray(e){
    imageArray = e
}

var region1Array= ["Photos/OG/P1000412.jpg", "Photos/OG/P1000414.jpg"];

$("#region1").click(changeArray(region1Array));

I tried substituting the images, and the folders but it does not work. Is there a way to make it work using arrays, or even just to find this one?