I'm working with a table that can be found here: https://codepen.io/anon/pen/bjvwOx
Whenever I click on a row (for example, the 1st row 'NODE ID 1'), I want the div with the id #divTemplate to appear below that particular row, just like it does in the demo link.
Here are the issues I've encountered:
When I click on a row, the div displays all the contents from endpointsData object instead of specific values. For instance, when clicking on the first row, it should display 'EPID: 1' rather than 'EPID: 1234' as shown in the demo.
The 'accordion' display of the div behaves erratically. In the demo, if you click multiple times on a row, the div keeps appearing in different places until it stops working altogether.
To address the first problem, I attempted this approach: https://codepen.io/anon/pen/Owvbae (I manually selected each id from the div)
$("#epid").text(roomValue[key[0]]);
$("#clslist").text(roomValue[key[1]]);
$("#type").text(roomValue[key[2]]);
$("#zplus").text(roomValue[key[3]]);
I'm wondering if there's a way to loop through this process. Any suggestions for tackling the second problem?