title: How to get product name and image dynamically using jQuery?
body: <p>Actually I am doing add to cart functionality using jQuery. On click of add to cart button product name and image should come. Statically I can do but how to get the product name and image dynamically for all divs is what I want. Please somebody help with this.</p>
  
  <p>This is my HTML markup:</p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
      &lt;div class="prdtitem" id="anaconda"&gt;
          &lt;div class="cartBg"&gt;
              &lt;a href="#cart" onclick="addToCart()"&gt;
                  &lt;div class="enqry-cart pull-left"&gt;
                      &lt;i class="fa fa-shopping-cart pull-left" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;span class="pull-left"&gt;add to enquiry cart&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;img src="images/barcunda-black.jpg" class="lazy-loaded"/&gt;
          &lt;h4&gt;Barcunda Black&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-4"&gt;
      &lt;div class="prdtitem" id="anaconda"&gt;
          &lt;div class="cartBg"&gt;
              &lt;a href="#cart"&gt;
                  &lt;div class="enqry-cart pull-left"&gt;
                      &lt;i class="fa fa-shopping-cart pull-left" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;span class="pull-left"&gt;add to enquiry cart&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;img src="images/bruno-white.jpg" class="lazy-loaded"/&gt;
          &lt;h4&gt;Bruno White&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-4"&gt;
      &lt;div class="prdtitem" id="anaconda"&gt;
          &lt;div class="cartBg"&gt;
              &lt;a href="#cart" onclick="addToCart()"&gt;
                  &lt;div class="enqry-cart pull-left"&gt;
                      &lt;i class="fa fa-shopping-cart pull-left" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;span class="pull-left"&gt;add to enquiry cart&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;img src="images/fantasy-brown.jpg" class="lazy-loaded"/&gt;
          &lt;h4&gt;Fantasy Brown&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-4"&gt;
      &lt;div class="prdtitem" id="anaconda"&gt;
          &lt;div class="cartBg"&gt;
              &lt;a href="#cart" onclick="addToCart()"&gt;
                  &lt;div class="enqry-cart pull-left"&gt;
                      &lt;i class="fa fa-shopping-cart pull-left" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;span class="pull-left"&gt;add to enquiry cart&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;img src="images/iceberg.jpg" class="lazy-loaded"/&gt;
          &lt;h4&gt;Iceberg&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-4"&gt;
      &lt;div class="prdtitem" id="anaconda"&gt;
          &lt;div class="cartBg"&gt;
              &lt;a href="#cart" onclick="addToCart()"&gt;
                  &lt;div class="enqry-cart pull-left"&gt;
                      &lt;i class="fa fa-shopping-cart pull-left" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;span class="pull-left"&gt;add to enquiry cart&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;img src="images/mercury-white.jpg" class="lazy-loaded"/&gt;
          &lt;h4&gt;Mercury White&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here my jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
      //alert("coming");
      var cart = [];
          $(function () {
              if (localStorage.cart) {
                  cart = JSON.parse(localStorage.cart);
                  // console.log(cart);
                  showCart();
              }
      });
  });
  
          function addToCart() {
              how to get product name and image here for all divs?
              // alert(price);alert(name);alert(qty);return false;
              // update qty if product is already present
              for (var i in cart) {
                  if(cart[i].Product == name) {
                      cart[i].Qty = qty;
                      showCart();
                      saveCart();
                      return;
                  }
              }
              // create JavaScript Object
              var item = { Product: name,  Price: price, Qty: qty };
              //console.log(item);return false;
              // alert(item);return false; 
              cart.push(item);
              console.log(cart);return false;
              saveCart();
              showCart();
          }
  
          function deleteItem(index){
              //alert(index);return false;
              cart.splice(index,1); // delete item at index
              showCart();
              saveCart();
          }
  
          function saveCart() {
              if ( window.localStorage) {
                  localStorage.cart = JSON.stringify(cart);
              }
          }
  </code></pre>