JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="qrcode"></div>
<div class="qrcode" alt="koo1"></div>
<div class="qrcode" alt="koo2"></div>
<div class="qrcode" alt="koo3"></div>
<div class="qrcode" alt="koo4"></div>
<div class="qrcode" alt="koo5"></div>
<div class="qrcode" alt="koo6"></div>

JavaScript

function () {
    $.fn.qrcode = function (options) {
        var settings = {
            baseURI: 'http://api.qrserver.com/v1/create-qr-code/?data=',
            source: 'http://goqr.me',
            data: window.location.href,
            size: '70x70',
            linkBack: true,
            css: {
                'border': '20px solid #fff'
            }
        }
        settings = $.extend({}, settings, options);
        return this.each(function () {
            var idek = $(this).attr('alt')
            $(this).html('<img>')
                .find('img').attr('src', settings.baseURI + encodeURIComponent(settings.data) + '&size=' + settings.size)
                .css(settings.css).filter(function () {
                return settings.linkBack;
            })
                .wrap('<a href="' + idek + '" style="text-decoration:none;"></a>');
        });
    };
});

$(function () {
    $('.qrcode').qrcode();
});