title: Random generated images inside a table disappear
body: <p><strong><em>Problem</em></strong></p>
  
  <p>I tried to randomly generate the position of two images( the images of the characters) in a table td, 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. </p>
  
  <p><strong><em>Pen</em></strong></p>
  
  <p>Here is all the code: <a href="https://codepen.io/legeo/pen/MqYarz" rel="nofollow noreferrer">penHere</a></p>
  
  <p><strong><em>Interested functions</em></strong></p>
  
  <p>How the table\map is building? 
  it's a 2d array random generated, something like this: </p>
  
  <pre><code>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]]
  </code></pre>
  
  <p>After I build the map in the table with this one: </p>
  
  <pre><code>function mapGenerate(map){
  
          //loop the 2d array map and change the number with the appropriate img    
          for(var i = 0; i &lt; map.length; i++) {
              var innerArrayLength = map[i].length;
              for(var j = 0; j&lt;innerArrayLength; j++){
                  if(map[i][j] === 0){
                      map[i][j]="&lt;div class=\"tile\"&gt;&lt;img class=\"walkable\" src=\"https://image.ibb.co/bGanFz/floor_Resized.png\"&gt;&lt;/div&gt;";
                  }else{
                      map[i][j]="&lt;img class=\"nonWalkable\" src=\"https://image.ibb.co/m9s1az/volcanoresize.png\"&gt;";
                  }    
                  ;
              }
              $("#tableGame").append("&lt;tr&gt;&lt;td&gt;"+ map[i].join('&lt;/td&gt;&lt;td&gt;') + "&lt;/td&gt;&lt;/tr&gt;")    
          }
  }
  </code></pre>
  
  <p>with the function below i select the coordinate ( they are corrects, i check it several times in the console)</p>
  
  <pre><code>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);
  };
  </code></pre>
  
  <p>and finally, after i have 2 valid coordinates i can show the character:</p>
  
  <pre><code>function place(coord, char){
    console.log('sei entrato nella funzione place');
    var charImage = $("&lt;img&gt;").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);
  };
  </code></pre>
  
  <p>these are the css regarding the table and the image char:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>I don't understand why sometimes one or both of the images, disappear, any kind of help will be really appreciated. </p>