JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="output1"></pre>
<pre id="output2"></pre>

<pre id="out1"></pre>
<pre id="out2"></pre>

<span loopx='{"operator":"maxis"}'>hello</span>
<span loop='{"operator":"maxis"}'>world</span>

JavaScript

$( document ).ready(function() {    
    $('span[loopx]').each(function(index) {
        var attr = $(this).attr('loopx');
        document.getElementById('output1').innerHTML = attr;
    });
    
    $('span[loop]').each(function(index) {
        var attr = $(this).attr('loop');
        document.getElementById('output2').innerHTML = attr;
    });
    
    var span = document.getElementsByTagName( 'span' );
    for ( var i = 0, len = span.length; i < len; i++ ) {
        var out = document.querySelector( '#out'+ (i+1) );
        out.innerHTML = span[i].getAttribute( 'loopx' ) + span[i].getAttribute( 'loop' );
    }
});