JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dial"></div>
<div>Some Space</div>
<div class='dial'></div>

CSS

.dial {
    width: 200px;
    height: 200px;
    background: yellowgreen;
}

JavaScript

var app = {

    fns: {

        init: function initFn() {

            this.parseDials();
        },

        parseDials: function parseDialsFn() {

            var $dials = $('.dial'),
                dial_count = $dials.length,
                dial_i = 0,
                $dial;

            for (dial_i = 0; dial_i < dial_count; dial_i += 1) {

                $dial = $($dials[dial_i]);
                this.draw($dial);
            }
        },

        draw: function drawFn($dial) {

            var NS = "http://www.w3.org/2000/svg";
            var svg = document.createElementNS(NS, "svg");
            svg.width = $dial.width();
            svg.height = $dial.height();

            $($dial).append(svg);
            console.log(svg);


            var $circle = $(document.createElementNS(NS, "circle")).appendTo(svg);

            $circle.attr({
                "cx": 100,
                    "cy": 100,
                    "r": 40,
                    "stroke": "black"
            });

            $circle.css({
                fill: "red"
            });

        }
    }
};

app.fns.init();