title: Display price in HTML page based on selected currency
body: <p>I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.</p>
  <p>Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.</p>
  <p>It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/</p>
  <p>Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.</p>
  <p>Here's product pricing section HTML source code-</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  &lt;title&gt;Website Hosting | Host Hub&lt;/title&gt;
  
  &lt;!--Favicon--&gt;
  &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;assets/img/favicon.png&quot;/&gt;
  
  &lt;!--Libraries--&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/libraries/bootstrap/css/bootstrap.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/libraries/font-awesome/css/all.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/libraries/animate/animate.min.css&quot;&gt;
  
  &lt;!--Google Fonts--&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://fonts.googleapis.com/css?family=Signika:300,400,600,700&quot;&gt;
  
  &lt;!--Styles--&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/style.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/mobile.min.css&quot;&gt;
  
  &lt;!--Custom CSS--&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/css/custom.css&quot;&gt;
  
  &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!--Begin Header--&gt;
  &lt;div class=&quot;topbar&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt; 
        &lt;!--Begin Social Icons--&gt;
        &lt;div class=&quot;col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social&quot;&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;https://www.facebook.com/whmcsthemes&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;https://www.twitter.com/whmcsthemes&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;fab fa-twitter-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;https://www.youtube.com/whmcsthemes&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;fab fa-youtube-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;https://www.skype.com&quot; target=&quot;_blank&quot;&gt;&lt;i class=&quot;fab fa-skype&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;!--End Social Icons--&gt; 
        &lt;!--Begin Client Links--&gt;
        &lt;div class=&quot;col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client&quot;&gt;
          &lt;div class=&quot;link xshide&quot;&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;.modal-select-currency-content&quot; id=&quot;modal-select-currency&quot;&gt;&lt;i class=&quot;fas fa-coins&quot;&gt;&lt;/i&gt;$ USD&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link xshide&quot;&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;.modal-select-language-content&quot; id=&quot;modal-select-language&quot;&gt;&lt;i class=&quot;fas fa-globe&quot;&gt;&lt;/i&gt;Language&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;.modal-client-login-content&quot; id=&quot;modal-client-login&quot;&gt;&lt;i class=&quot;fas fa-lock&quot;&gt;&lt;/i&gt;Customers&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-life-ring&quot;&gt;&lt;/i&gt;Support&lt;/a&gt;&lt;/div&gt;
          &lt;div class=&quot;link&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-shopping-cart&quot;&gt;&lt;/i&gt;&lt;span class=&quot;desktop&quot;&gt;View Cart&lt;/span&gt; (0)&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;!--End Client Links--&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--End Header--&gt; 
  
  &lt;!--Begin Web Hosting--&gt;
  &lt;div class=&quot;webhosting&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt; 
        &lt;!--Begin Plan Box--&gt;
        &lt;div class=&quot;col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown&quot;&gt;
          &lt;div class=&quot;panel&quot;&gt;
            &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;Micro Hub&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;the-price&quot;&gt;
                &lt;h1&gt; $2&lt;span class=&quot;subscript&quot;&gt;.99&lt;/span&gt;&lt;/h1&gt;
                &lt;small&gt;Per Month&lt;/small&gt; &lt;/div&gt;
              &lt;table class=&quot;table&quot;&gt;
                &lt;tr&gt;
                  &lt;td&gt;1 GB Storage&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;10 GB Bandwidth&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Email&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Databases&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited FTP Accounts&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;img alt=&quot;&quot; src=&quot;assets/img/hosting/website-hosting/cpanel.png&quot; srcset=&quot;assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x&quot; class=&quot;img-fluid&quot; /&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;a href=&quot;#&quot;&gt;
            &lt;div class=&quot;panel-footer&quot;&gt;Order Today&lt;/div&gt;
            &lt;/a&gt; &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--End Plan Box--&gt; 
        &lt;!--Begin Plan Box--&gt;
        &lt;div class=&quot;col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown&quot; data-wow-delay=&quot;0.2s&quot;&gt;
          &lt;div class=&quot;panel&quot;&gt;
            &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;Small Hub&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;the-price&quot;&gt;
                &lt;h1&gt; $7&lt;span class=&quot;subscript&quot;&gt;.99&lt;/span&gt;&lt;/h1&gt;
                &lt;small&gt;Per Month&lt;/small&gt; &lt;/div&gt;
              &lt;table class=&quot;table&quot;&gt;
                &lt;tr&gt;
                  &lt;td&gt;10 GB Storage&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;100 GB Bandwidth&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Email&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Databases&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited FTP Accounts&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;img alt=&quot;&quot; src=&quot;assets/img/hosting/website-hosting/cpanel.png&quot; srcset=&quot;assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x&quot; class=&quot;img-fluid&quot; /&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;a href=&quot;#&quot;&gt;
            &lt;div class=&quot;panel-footer&quot;&gt;Order Today&lt;/div&gt;
            &lt;/a&gt; &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--End Plan Box--&gt; 
        &lt;!--Begin Plan Box--&gt;
        &lt;div class=&quot;col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown&quot; data-wow-delay=&quot;0.4s&quot;&gt;
          &lt;div class=&quot;panel&quot;&gt;
            &lt;div class=&quot;panel-heading&quot;&gt;
              &lt;h3 class=&quot;panel-title&quot;&gt;Big Hub&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;the-price&quot;&gt;
                &lt;h1&gt; $9&lt;span class=&quot;subscript&quot;&gt;.99&lt;/span&gt;&lt;/h1&gt;
                &lt;small&gt;Per Month&lt;/small&gt; &lt;/div&gt;
              &lt;table class=&quot;table&quot;&gt;
                &lt;tr&gt;
                  &lt;td&gt;20 GB Storage&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;200 GB Bandwidth&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Email&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited Databases&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Unlimited FTP Accounts&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;img alt=&quot;&quot; src=&quot;assets/img/hosting/website-hosting/cpanel.png&quot; srcset=&quot;assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x&quot; class=&quot;img-fluid&quot; /&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/div&gt;
            &lt;a href=&quot;#&quot;&gt;
            &lt;div class=&quot;panel-footer&quot;&gt;Order Today&lt;/div&gt;
            &lt;/a&gt; &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--End Plan Box--&gt; 
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;!--Libraries--&gt; 
  &lt;script src=&quot;assets/libraries/jquery/jquery.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/jquery-ui/jquery-ui.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/wow/wow.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/zumada/sticky-header.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/zumada/dropdown-menu.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/zumada/price-slider-6-plans.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/zumada/scroll-to-top.min.js&quot;&gt;&lt;/script&gt; 
  &lt;script src=&quot;assets/libraries/zumada/countdown.min.js&quot;&gt;&lt;/script&gt; 
  
  &lt;!--Custom Scripts--&gt; 
  &lt;script src=&quot;assets/js/scripts.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>