title: How to auto display the sum of two buttons with a number value in jquery?
body: <p>I can't find some similar questions here same with my problem.
  Could someone help me to auto add two numbers by clicking the "book" button with a number value? and display the total in <code>&lt;h1 id="total"&gt;Total&lt;/h1&gt;</code>?</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>            &lt;div class="left-container" style="width: 50%; float: left"&gt;
          &lt;h2&gt;Left&lt;/h2&gt;   
              &lt;div class="each-container"&gt;
                  &lt;p class="name"&gt;Name 1&lt;/p&gt;
                  &lt;p class="price"&gt;1111.00&lt;/p&gt;
                  &lt;button class="book1" value="1111.00"&gt;book&lt;/button&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="each-container"&gt;
                  &lt;p class="name"&gt;Name 2&lt;/p&gt;
                  &lt;p class="price"&gt;2222.00&lt;/p&gt;
                  &lt;button class="book1" value="2222.00"&gt;book&lt;/button&gt;
              &lt;/div&gt;
              &lt;h1 id="feedback1"&gt;feedback1&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="right-container" style="width: 50%; float: right"&gt;
          &lt;h2&gt;Right&lt;/h2&gt;  
              &lt;div class="each-container"&gt;
                  &lt;p class="name"&gt;Name 1&lt;/p&gt;
                  &lt;p class="price"&gt;1111.00&lt;/p&gt;
                  &lt;button class="book2" value="1111.00"&gt;book&lt;/button&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="each-container"&gt;
                  &lt;p class="name"&gt;Name 2&lt;/p&gt;
                  &lt;p class="price"&gt;2222.00&lt;/p&gt;
                  &lt;button class="book2" value="2222.00"&gt;book&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;h1 id="feedback2"&gt;feedback2&lt;/h1&gt;
          &lt;/div&gt;
              &lt;h1 id="total"&gt;Total&lt;/h1&gt;
  </code></pre>
  
  <p>And this my jquery code:</p>
  
  <pre><code>$(document).ready(function() {
      $('.book1').click(function (){
          var price1 = $(this).attr('value');
          $('#feedback1').text(price1);
      });
      $('.book2').click(function (){
          var price2 = $(this).attr('value');
          $('#feedback2').text(price2);
      });
  
      var feedback1 = $('#feedback1').text();
      var feedback2 = $('#feedback2').text();
      var total = feedback1 + feedback2;
      $('#total').text(total);
  
  });
  </code></pre>
  
  <p>Thanks in advance :)</p>