javascript - Show a different gallery depending on which button is clicked -

i have gallery here nation select buttons opens 1 background image in div ".displayarea", picking pics array "arrayindex". , "next"/"previous" select buttons, open separate gallery, in div ".containsnext", placed above displayarea div. close button closes both these divs. working far. want display different gallery different arrays(or can same, don't know more efficient)within .containsnext div, based on nation button clicked. say, button "croatia", pic photos array on line 3 displayed, button spain, array, arrayspain(line 9) displayed. know supposed post code of have tried, did not come useful. background pic in displayarea, have done following

function addimageinto(arrayindex, container) { var displayarea = document.queryselector('.displayarea'); if (displayarea.queryselector('.' + container.id)) {     return; } displayarea.innerhtml = ''; 

but cam not able achieve goal that. else working, forward() , backwards() functions, forward function nested within rather large function line 39 65. writing same code on , on every button, cannot useful way this.

link pen: http://codepen.io/damianocel/pen/gpgglb

please click nations button before click "next" or "previous" buttons. thank help

from understand, first want different array each country , second don't want re-write code every single button. every country have: button name of country background image array of images slideshow recommendation using templates. have used these http://handlebarsjs.com/ before. templates allow cut repetitive code introducing pattern, followed in many elements in code. imagine instead of having different array country name , bg-images , slideshow, can structure data this: http://codepen.io/teft74/pen/mkeqbp?editors=101 (sorry give un external site refused accept code)

this structure allowes use templates. every country have: button name of country background image array of images slideshow in templates can write like:

 {{#each country}}  // "each" makes loop each country, returning button     <button> {{name}}</button>     {{/country}} 

this take each country name data , place in button , create buttons each country. when click on button takes different template populated data corresponding button. example user clicks on button name: spain(which cell in country array) populate template background image , gallery same cell.

i'm sorry can more specific, have re-write code make work templates. might seem lot of work(the idea offering) once it more scalable. make template once , if want add country add data(name, bg-image, gallery[]) , template generates whole html, css , javascript functions you, without having write on again single time. check out handlebars , figure out(with general directions) how can apply case. luck!