jQuery: Unable to access array elements using variable and array literal

first Q/ Noob.

I have several arrays set up inside $(document).ready(function(){ --e.g. var caribbean = ["AG", "AI", "AN", "AW", "BB", "BL"];

Each element is a unique inside a Each element bordered with where class = a specific subcontinent

    `<div class="flag">  
        <a class="029" id="aw" href="#"><img class="media-object custom-media" src="flags/Aruba.png" alt="Aruba"> </a> 
        <p> Aruba </p>
    </div>`

--e.g. 029 = carribean

The user-selected subcontinent is verified in an array of all subcontents.

I hide all flags from all subcontinents. No problem to there.

I'm trying to show the appropriate flags, based on the user selection.

Tried so far each(), forEach() --> "TypeError: invalid 'in' operand a":jquery-2.1.4.min.js line 2000+

Found info on AJAX, PHP, and Json.

Now trying to 'for loop' through the array, "caribbean" (in this example).

Using alert I found that the contents of the variable arrayName ("caribbean") is being converted into a char array - arrayName.length === 9

    `for (var i = 0; i < arrayName.length; i++)
    {
        alert( "Name: " + arrayName + "    " + "Index : " + i + "    " +     "Index value: " + arrayName [i]);
    };`

I have changed variables around in case of reserved words and have found quite a bit on creating the char array.

I am trying to reference the array without the contents of arrayName becoming it's own array. At this point, I can't think of anything else to try and haven't found anything more pointing to a potential solution.

The project is HTML, CSS and javascript/ jQuery. It uses the Bootstrap row/ column setup and custom overflow sliders.

Also, in looking around I'm not sure if I should be using hide()/ show() or display: block/ none. I need the resulting display to sequence into the bootstrap column without leaving gaps, top down. Please advise.

I would appreciate any direction you could provide. I am stumped. TIA.

RAd

via Chebli Mohamed