JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tbody id="tableBody"><tr><td>Click on images to append. First image fails with '+' in ID.</td></tr></tbody>
</table>
JavaScript
var fakeResponse = { member: [{identifier: 'ONE+ONE'}, {identifier: 'TWO'}, {identifier: 'THREE'}] };
addTableRows = function(response){
var members = response['member'];
$.each(members, function (idx, data) {
var currentID = data['identifier'];
$("#tableBody")
.append($("<tr>")
.attr('id','row-icon' + currentID)
.append($("<td>")
.append($("<img src='http://his-booking.com/images/flag_br.gif'>")
.attr('id','expand-icon' + currentID)
.click(function(){
iconClicked(currentID);
})
)
)
)
.append($("<tr>")
.attr('id','row-icon-' + currentID)
.css("display","none")
.append($("<td>")
.append($("<table>")
.attr('id','new-table-' + currentID))));
});
};
iconClicked = function(currentID){
var test = $("#expand-icon" + currentID.replace('+', '\\+')).attr("src");
var testID = $("#row-icon" + currentID.replace('+', '\\+')).attr("id");
alert(test+'\n'+testID);
$("#row-icon-" + currentID).css("display", "block");
$("#new-table-" + currentID)
.append($("<tr>")
.attr('id','new-row-icon' + currentID)
.append($("<td>")
.append($("<img src='http://his-booking.com/images/flag_fr.gif'>")
.attr('id','expand-icon' + currentID)
)
)
);
};
addTableRows(fakeResponse);