Dynamic Content (Pricing) Based on Location

Hi everyone, I am working on creating a code that displays different texts (prices) based on the users' location. I found this code on the Internet it works perfectly if I use it alone. However, I have different products on the same page and need to replicate the same code for different products. If I use both codes on separate pages they work, but not on the same page.

The code is as follows: (as you can see for one product I try to use the class "update_price" and for another "update_price2" my logic is that when the code is running the "divs" with each desired class will be updated.

<script type="application/javascript">
    function get_url_param() {
        
        var vars = {};
        
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        
        return vars;
        
    }
    
    function geoip(json){
        
        // Get the country URL parameter
        country_param = get_url_param()['country'];
        
        // If the country parameter is not empty, then use this value
        if(country_param != null) {
            country_code = country_param;
        } else {
            // Else use the GEO IP location
            country_code = json.country_code;
        }
        
        // Set dynamic values in an object
        var price_obj = {
            prices: {
                ES: '€148.92 EUR',
                US: '$150.00 USD',
                MX: '$1,999 MXN',
            }
        },
        get_price = price_obj[ 'prices' ][ country_code ];
        
        // Check if we have a price for the visitor's country, if not we'll set a default of $12.99
        if(get_price == null) {
            display_price ='$1,999 MXN';
        } else {
            // Else the price does exist is the array
            display_price = get_price;
        }
        
        // Get the element we want to update by class
        var price_elem = document.getElementsByClassName('update_price');
        
        // Update each element on the page that uses this class
        for (var i = 0; i < price_elem.length; i++) {
          var str = price_elem[i].innerHTML;
          price_elem[i].innerHTML = display_price;
        }

    }
    </script>
    <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

<div class="update_price"> </div>

<style>
.update_price {

font-size: 1.85em;
font-weight: bold;
}

</style>

*ANOTHER PRODUCT*

<script type="application/javascript">
    function get_url_param() {
        
        var vars = {};
        
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        
        return vars;
        
    }
    
    function geoip(json){
        
        // Get the country URL parameter
        country_param = get_url_param()['country'];
        
        // If the country parameter is not empty, then use this value
        if(country_param != null) {
            country_code = country_param;
        } else {
            // Else use the GEO IP location
            country_code = json.country_code;
        }
        
        // Set dynamic values in an object
        var price_obj = {
            prices: {
                ES: '175.20 EUR',
                US: '$176.00 USD',
                MX: '$2,359 MXN',
            }
        },
        get_price = price_obj[ 'prices' ][ country_code ];
        
        // Check if we have a price for the visitor's country, if not we'll set a default of $12.99
        if(get_price == null) {
            display_price = '$2,359 MXN';
        } else {
            // Else the price does exist is the array
            display_price = get_price;
        }
        
        // Get the element we want to update by class
        var price_elem = document.getElementsByClassName('update_price2);
        
        // Update each element on the page that uses this class
        for (var i = 0; i < price_elem.length; i++) {
          var str = price_elem[i].innerHTML;
          price_elem[i].innerHTML = display_price;
        }

    }
    </script>
    <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

<div class="update_price2"> </div>

<style>
.update_price2 {

font-size: 1.85em;
font-weight: bold;
text-decoration: line-through;
color: red;
}

</style>

I have no experience with coding but have always found solutions by tweaking things around but I cannot seem to make this one work. 

Thank you in advance to anyone that helps 🙂

@tuanphan Once again, after 2 years, asking kindly for your help if you have time! Thank you so so much!