Edit in JSFiddle

```var COUNTER = 0;

let nums = `
<PUT TEST CASE HERE. DO NOT INCLUDE DIMENTION NUMBERS - JUST THE ISLANDS>
`;

/**
Symbols:
- Water => ~
- outside water after paint => %
- outside island after paint  => @
**/

// make into matrix of elements
let map = nums.split("\n").map(n=>n.split(""));
print(map);

// 1. Start of first water symbol and recursively paint all water symbols (up/d/r/l)
paintWater(0,0); // works ^

print(map);

// 2. Go through all elements. If there is a star (piece of land: *) that touches the outside water, `%`, then recursively paint that piece of land
for (let i = 0; i < map.length; i++) {
for (let k = 0; k < map[0].length; k++) {
// if the current space is a land piece
if (map[i][k] == '*') {
// if any space around it (u/d/l/r) is an outside water piece (%), then recursively paint that piece of land
if (pieceAroundIsOutsideWater(i, k)) {
paintLand(i, k);
}
}
}
}

print(map);

// 3. Go back through all elements and if it is a land piece, then it is an island inside an island, so paint it recursively and add 1 to the counter
for (let i = 0; i < map.length; i++) {
for (let k = 0; k < map[0].length; k++) {
if (map[i][k] == '*') {
COUNTER++;
paintLand(i, k);
}
}
}

console.log(`# of Island in island: \${COUNTER}`);

/********************************* FUNCTIONS *****************************************/
function print( m) {
//console.log(message);
for (let a of m) {
let s = "";
for (let x of a) {
s += `\${x}`
}
console.log(s)
}
console.log('\n')
}

// water will be painted as a percentage symbol `%`
function paintWater(x, y) {
// if out of bounds end
if (x >= map.length || x < 0 || y >= map[0].length || y < 0) {
return;
}

// if the current element is not a water, end
if (map[x][y] != '~') {
return;
}

// set current to be the symbol
map[x][y] = "%";

// send off in all directions (up/down/right/left)
paintWater(x + 1, y);
paintWater(x - 1, y);
paintWater(x, y + 1);
paintWater(x, y - 1);

// diagonally
paintWater(x + 1, y + 1);
paintWater(x + 1, y - 1);
paintWater(x - 1, y + 1);
paintWater(x - 1, y - 1);
}

function paintLand(x, y) {
//console.log(`In paintLand: x = \${x}, y = \${y}`);
// if out of bounds, end
if (x >= map.length || x < 0 || y >= map[0].length || y < 0) {
//console.log(`(\${x}, \${y}) == \${map[x][y]}`);
return;
}

// if the current element is not a land (*), end
if (map[x][y] != "*") {
//console.log(`Not the right symbol: (\${x}, \${y}) == \${map[x][y]}`);
return;
}

// set current to be the symbol
map[x][y] = "@";

// send off in all directions (up/down/right/left)
paintLand(x + 1, y);
paintLand(x - 1, y);
paintLand(x, y + 1);
paintLand(x, y - 1);
}

function pieceAroundIsOutsideWater(x, y) {
if (isInMap(x + 1, y) && map[x + 1][y] == "%") return true;
if (isInMap(x - 1, y) && map[x - 1][y] == "%") return true;
if (isInMap(x, y + 1) && map[x][y + 1] == "%") return true;
if (isInMap(x, y - 1) && map[x][y - 1] == "%") return true;

return false;
}

function isInMap(x, y) {
return x < map.length && x >= 0 && y < map[0].length && y >= 0;
}```