JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sortable1"></div>

JavaScript

var loopValues = [0];
var templateHtml = '';
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = "{type: 'page', text:'Google',href: 'www.google.com',id: 'newid'}"; // this is the json data which need to be appended as data-all attribute value.
    //since its JSON i use single quote inside but double outside.
    templateHtml = templateHtml.concat('<a data-all="' + test + '" href="javascript:;" class="icon" id="TestTt">TT</a>');
});
console.log(templateHtml);
$("#sortable1").html(templateHtml);

console.log($("#sortable1 a").data('all'));