I am using a piece of jQuery code to create tables dynamically based on JSON data (it’s live from another source so I can’t use collections, the code for which is below. (I know it’s still a little rough, please don’t hate on my jQuery, it’s very beta). Anyway, this code relies on duplicating an existing structure that I built in Webflow, which includes some interactions, but when I start duplicating the rows of the table, the interactions all break. Is there any way to fix this?
<script>
$(document).ready(function() {
response = '{"label":"plates","data":[{"plate":"123ABC","name":"Joe Schmoe","email":"joe@college.edu","lots":"Lower Firstie"},{"plate":"456DEF","name":"Jack Smith","email":"jack@college.edu","lots":"Upper Firstie"}]}';
var obj = jQuery.parseJSON(response);
tables = document.getElementsByClassName(obj.label);
$.each(tables, function(i, table) {
console.log(table);
templates = table.getElementsByClassName("row");
$.each(templates, function (j, template) {
$.each(obj.data, function(k, line) {
rowText = template.cloneNode(true).outerHTML;
$.each(line, function(label, value) {
rowText = rowText.replace("{{" + label + "}}", value);
});
if (k === obj.data.length - 1 && k !== 0) {
template.innerHTML = rowText;
} else {
row = document.createElement("div");
row.innerHTML = rowText;
table.appendChild(row.firstChild);
}
});
});
});
});
</script>