JSFiddle - React, Tailwind, and code Playground

by Michael Wilson

HTML

<div class="shopping-item" data-donation-item="Lisa">
    <p><span>£33</span> could help a family find and keep a home</p>
    <input type="number" name="amount" min="1" placeholder="£33" class="shopping-1-input">
    <button data-donation-default="33" class="donate-button shopping-1-button">donate now</button>
</div>
<div class="shopping-item" data-donation-item="Lisa">
    <p><span>£50</span> could help a family find and keep a home</p>
    <input type="number" name="amount" min="1" placeholder="£50" class="shopping-2-input">
    <button data-donation-default="50" class="donate-button shopping-2-button">donate now</button>
</div>

JavaScript

document.onclick = function (e) {

    var item = e.path[1].dataset.donationItem,
        basic = e.target.dataset.donationDefault,
        value = e.path[1].childNodes[3].value;

    if (basic) {

        var category = "Sallys story - shopping list - helpline",
            label = "May cash appeal";

        $donate.settings.cid = 152;
        $donate.ga(category, label).go(basic, value);
    }
};

var $donate = {
    settings: {
        url: "https://donate.shelter.org.uk/b?",
        cid: 1,
        freeamount: 1
    },
    go: function (init, input) {
        var amount = parseInt(input, 10) * 100,
            url = this.settings.url + "cid=" + this.settings.cid + "&freeamount=" + this.settings.freeamount + "&amount=";

        if (input === '' || parseInt(input, 10) <= 0) {
            window.location.href = url + init * 100;
        } else {
            window.location.href = url + amount;
        }
        return this;
    },
    ga: function (category, label, value) {
        //ga('send', 'event', category, 'click', label, value);
        
        console.log(ga());
        
        console.log('send', 'event', category, 'click', label, value);
        
        return this;
    }
};