title: How to append images to a div that is contained in a map marker infowindow (leaflet)
body: <p>I have a list of images where the src gets fetched from the database. For each one in the list it creates an image and append it to a div. However, my div is represented in a string that has the code that is supposed to appear on each marker that I have, I think that's the problem. Is there any way to solve this problem? Here what I have so far: </p>
  
  <pre><code> $.each(data, function (i, item) {
  
              var aux
  
              item.listaOcorrencias.forEach(function (ocorrencia, o) {
  
                  aux = ocorrencia.fotografia;
  
                  $(aux).each(function () {
  
                      $('#myDiv').append('&lt;img src="imagensFogos/' + this.fotografia + '" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width:70px; height:60px" hspace="4"/&gt;')
                  });
  
  
                  //Here is the infowindow that contains myDiv
  
                  var infowindow = '&lt;div id="content" style="hight:700px; width:500px"&gt;' +
                      '&lt;div id="siteNotice"&gt;' +
                      '&lt;/div&gt;' +
                      '&lt;div id="bodyContent"&gt;' +
                      '&lt;p&gt;&lt;b&gt;Avaliação da Ocorrência:&lt;/b&gt;&lt;/p&gt;' +
                      //Here is where the images should be appended
                      '&lt;div id="myDiv" class="flex-parent" style="display:flex}"&gt; &lt;/div&gt;'
  
  
                      '&lt;div class="button-holder"&gt;' +
                      '&lt;a href="#slider-image-1" class="slider-change"&gt;&lt;/a&gt;' +
                      '&lt;a href="#slider-image-2" class="slider-change"&gt;&lt;/a&gt;' +
                      '&lt;a href="#slider-image-3" class="slider-change"&gt;&lt;/a&gt;' +
                      '&lt;/div&gt;' +
                      '&lt;/div&gt; ' +
                      '&lt;p id="estadoP"&gt; Estado: ' + item.estado + '&lt;/p&gt;' +
                      '&lt;button id="aceite" onclick="aceite()" style="background-color:#4CAF50;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin:5px;"&gt;Aceitar&lt;/button&gt;' +
                      '&lt;button id="recusado" onclick="recusado()" style="background-color:#f44336;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" &gt;Recusar&lt;/button&gt;' +
                      '&lt;button id="concluido" onclick="concluido()" style="background-color:#008CBA;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);margin:5px;" &gt; Concluído&lt;/button&gt;' +
                      '&lt;/div&gt;';
  
                  //definição do icon para o marcador
                  var ignicao;
  
                  var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })
                      .bindPopup(infowindow)
                      .on('click', onClick)
                      .addTo(map);
  
  
             //adds marker to map
  
                  $('#json map').append(marker);
  
  
              });
  
  
          }); 
      }); 
  </code></pre>