title: How to retrieve image src attribute dynamically and add it in html in a loop using JQuery or Javascript
body: <p>I have a object of array and i am storing image path in one of the index and i need to retrieve it and add it in img tag based on the location.
  I am running a loop on  the array to get the data and then in the click event i am creating dynamic html and adding the data accordingly, I able to retrieve the image path, but i am not able to add it.
  Please guide, any help would be appreciated.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
          &lt;!-- Meta --&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Xylem&lt;/title&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-
           scale=1.0"&gt;
          &lt;meta name="author" content="Samuel Norton"&gt;
  
          &lt;!-- Styles --&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;
          &lt;/script&gt;
          &lt;script src="http://code.jquery.com/color/jquery.color-
           2.1.0.min.js"&gt;
          &lt;/script&gt;
          &lt;script src="https://maps.googleapis.com/maps/api/js?
          key=AIzaSyA7whsF1OtjP38MWuQKXVjh1QncWGQh2L0&amp;callback=initMap" async 
          defer&gt;&lt;/script&gt;
          &lt;style&gt;
              /* Always set the map height explicitly to define the size of 
                 the 
               div
               * element that contains the map. */
               #location-page{
               /*border: 1px solid #426D8F;*/
              }
                          #map {
                          /*margin-top: 2.5%;*/
                          top: 5%;
                          margin-left: 16%;
                          height: 90%;
                          width: 68%;
                      }
                  &lt;/style&gt;
  
                  &lt;script&gt;
                      var map;
                      function initMap() {
                          var uluru = {lat: 83.5, lng: 9};
                          map = new google.maps.Map(document.getElementById('map'), {
                          center: uluru,
                          zoom: 2,
                          minZoom: 1
                          });
                          var geojsonFeature = {
                              "markers": [{
                                  "latitude": 18.562158,
                                  "longitude": 73.784005,
                                  "title": "abc",
                                  "address": "xyz",
                                  "image1": "img5.jpg",
                                  "image2": "C:/Users/pranand/Desktop/img1.jpg",
                              }, {
                                  "latitude": 22.434966,
                                  "longitude": 73.231136,
                                  "title": "abc",
                                  "address": "xyz",
                              "image1": "img3.jpg",
                                  "image2": "img4.jpg",
                              },
                              {
                                  "latitude": 19.259763,
                                  "longitude": 72.970113,
                                  "title": "abc",
                                  "address": "xyz",
                                  "image1": "img1.jpg",
                                  "image2": "C:/Users/pranand/Desktop/img2.jpg",
                              }]
                          };
  
                          var infowindow = new google.maps.InfoWindow();
                          var marker;
                          var i;
                          for(i=0;i&lt;geojsonFeature.markers.length;i++){
                              marker= new google.maps.Marker({
                                  position: new 
                                  google.maps.LatLng(geojsonFeature.markers[i].latitude, 
                                  geojsonFeature.markers[i].longitude),
                                  map: map,
                                  title: geojsonFeature.markers[i].title
                              });
                              google.maps.event.addListener(marker, 'click', 
                              (function(marker, i) {
                                  var img1 = $('&lt;img id="img1"/&gt;');
                                  img1.attr('src',geojsonFeature.markers[i].image1);
                                  console.log(img1);
                                  img1.appendTo('.imageDiv');
                                  //img1Src= geojsonFeature.markers[i].image1;
                              // console.log(img1Src);
                                  //$("#img1").attr('src',img1Src);
                                  return function() {
                                  infowindow.setContent('&lt;p style = "font-
                                  weight:bold;font-size:18px;margin-left:12%;margin-
                                  bottom:10px"&gt;'+geojsonFeature.markers[i].title+'&lt;/p&gt;'+
                                  '&lt;div style="margin-bottom:20px"&gt;'+ 
                                      geojsonFeature.markers[i].address + '&lt;/div&gt;'+
                                  '&lt;div class = "imageDiv" style = "margin-left:                         
                                  9.5%;"&gt;'+
                                  img1+
                                  '&lt;/div&gt;');
                                  infowindow.open(map, marker);
                                  }
                              })(marker, i));
                          }
                      }
                  &lt;/script&gt;
  
                      &lt;script src="js/script.js"&gt;&lt;/script&gt;
                      &lt;meta name="robots" content="noindex,follow" /&gt;
                      &lt;/head&gt;
  
                      &lt;body&gt;
                          &lt;div class="container-fluid"&gt;
                          &lt;div id="main-page"&gt;
                              &lt;div class="maincontent"&gt;
                                  &lt;h1&gt;Xylem&lt;/h1&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-6"&gt;
                                          &lt;a class="location pull-right"&gt; 
                                          &amp;#x2190;Locations&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-6"&gt;
                                      &lt;a class="product col-md-6"&gt;Products &amp;#x2192;&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div id="location-page"&gt;
                              &lt;!--img src="images/worldMap.jpg" /&gt;--&gt;
                              &lt;div id="map"&gt;&lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="product-page"&gt;
                              &lt;div class="nextcontent"&gt;
                                  &lt;h1&gt;Great! You're in the Product Page!&lt;/h1&gt;
                                  &lt;a class="nextlinkProcuct"&gt; &amp;#8592 GO BACK&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;/body&gt;
  
                      &lt;/html&gt;
  
  
          &lt;div id="main-page"&gt;
          &lt;!--- Main Content Here --&gt;
                  &lt;/div&gt;
  </code></pre>