Random generated images inside a table disappear

Problem

I tried to randomly generate the position of two images in a table, but sometimes they wouldn't show. One of them or both would just disappear. Try to loading more times (from 1 to 5) the pen to let the bug occur.

Pen

Here is all the code: penHere

Interested functions

How the table\map is building? it's a 2d array random generated, something like this:

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

After I build the map in the table with this one:

function mapGenerate(map){

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                if(map[i][j] === 0){
                    map[i][j]="<div class=\"tile\"><img class=\"walkable\" src=\"https://image.ibb.co/bGanFz/floor_Resized.png\"></div>";
                }else{
                    map[i][j]="<img class=\"nonWalkable\" src=\"https://image.ibb.co/m9s1az/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i].join('</td><td>') + "</td></tr>")    
        }
}

with the function below i select the coordinate ( they are corrects, i check it several times in the console)

function placeCharAndItem(char){


    let rowCoord= mapA.length;
    let cellCoord = mapA[1].length;
    //this object is to save 2 random number, the row and the cell 
    let coord={
        row: Math.floor(Math.random() * rowCoord),
        cell: Math.floor(Math.random() * cellCoord)
        };  
    //I need this 2 variables to check if the tiles is a correct one
    let toCheck = mapA[coord.row][coord.cell];     
    let check= toCheck.search('nonWalkable');

    //if it's not correct(you found the sub-string "non- 
    //walkable"), this while loop have to generate random new 
    //coordinates.

    while(check != -1){
        coord.row=Math.floor(Math.random() * rowCoord);
        coord.cell=Math.floor(Math.random() * cellCoord);
        toCheck = mapA[coord.row][coord.cell];     
        check= toCheck.search('nonWalkable');
    };   
        place(coord, char);
};

and finally, after i have 2 valid coordinates i can show the character:

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

these are the css regarding the table and the image char:

#tableGame .td{
  position: relative;
}

.char{
    z-index: 1000;
}

#tableGame .char {
  position: absolute;
}

table{
    background-color: black;
    border-collapse: collapse;
    border: 2px solid white;
    box-shadow: 1px 1px 30px white;
}


tr{
    border: 0px;
    padding: 0px;
    margin:0px;
}

td{
    border: 0px;
    padding: 0px;
    margin:0px;
}

I don't understand why sometimes one or both of the images, disappear, any kind of help will be really appreciated.