title: Applying google currency converter to all prices on a page
body: <p>what I am trying to do is convert all prices on a page with jquery, ajax and google currency.</p>
  
  <p>I found this, it's working fine.</p>
  
  <pre><code>$('#submit').click(function(){
       //Get the values
       var amount = $('#amount').val();
       var from  = $('#from').val();
       var to = $('#to').val();
       var params = "amount=" + amount + "&amp;from=" + from + "&amp;to=" + to ;
  
       $.ajax({
         type: "POST",
         url: "currency-converter.php",
         data: params ,
         success: function(data){
              $('#converted_value').html(amount + from +" is equal to : " +data);
  
         }
       });
      }) ;
  </code></pre>
  
  <p>How can i apply this to a div class on a page? Lets say i have a priceEuro class;</p>
  
  <pre><code>&lt;div class="product"&gt;
        &lt;div class="priceEuro"&gt;&lt;?php the_field('price1'); ?&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="product"&gt;
        &lt;div class="priceEuro"&gt;&lt;?php the_field('price2'); ?&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="product"&gt;
        &lt;div class="priceEuro"&gt;&lt;?php the_field('price3'); ?&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now i want to convert all different prices and add results to products like this,</p>
  
  <pre><code>$('.priceEuro').each(function () {
  
                           var amount = $(this).val();
               var params = "amount=" + amount + "&amp;from=EUR" + "&amp;to=USD" ;
  
               $.ajax({
                 type: "POST",
                 url: "currency-converter.php",
                 data: params ,
                 success: function(data){
                  $(this).append("&lt;div class="priceUsd"&gt;'+ data +'&lt;/div&gt;");
  
                 }
               });
  </code></pre>
  
  <p>I know it's not right these way so what's the solution? Thanks.</p>
  
  <hr>
  
  <p>Thanks to @UnTechie now i am getting results,</p>
  
  <pre><code>$(document).ready(function() {
  
      $.each($('.priceEuro'), function () {
  
       var amount = $(this).text();
       var dataString = "amount=" + amount + "&amp;from=EUR" + "&amp;to=USD";
  
           $.ajax({
             type: "POST",
             url: "chalo/themes/chalo/ajax_converter.php",
             data: dataString,
             success: function(data){
                  console.log(data);
                  $(this).append('&lt;div class="priceUsd"&gt;'+ data +'&lt;/div&gt;');
             }
           });
      });
  
  });
  </code></pre>
  
  <p>but i couldn't append these results after each div, is this wrong?</p>
  
  <pre><code>$(this).append('&lt;div class="priceUsd"&gt;'+ data +'&lt;/div&gt;');
  </code></pre>
  
  <hr>
  
  <p>ok, i found the problem. <code>this</code> is not automatically a reference to the right object in the ajax callback.</p>
  
  <p>now it's working like this,</p>
  
  <pre><code>$(document).ready(function() {
  
      $.each($('.priceEuro'), function () {
       var $this = $(this);
       var amount = $(this).text();
       var dataString = "amount=" + amount + "&amp;from=EUR" + "&amp;to=USD";
  
           $.ajax({
             type: "POST",
             url: "chalo/themes/chalo/ajax_converter.php",
             data: dataString,
             success: function(data){
                  console.log(data);
                  $this.append('&lt;div class="priceUsd"&gt;'+ data +'&lt;/div&gt;');
             }
           });
      });
  
  });
  </code></pre>