I currently have a web page with several rows of objects labeled as "things". As of now, I have them hardcoded in html as "Fan Speed, Temperature, Light, etc" as can be seen in this image: https://i.stack.imgur.com/u4Egd.png
I am looking to make these entries dynamic by having them stored in a database (using postgres currently) and have this box populated from the database directly. This way, the user can add or delete "things" and have continuously updated, similar to a shopping cart.
Now for this to work, I am a bit confused as to what would be the way to go about making it so that I can dynamically add the HTML for each entry. Eventually, every row of entry should have it's own form within, so the HTML code will be very similar for each row, but there will need to be unique links for each form.
I currently already am already able to retrieve all the entries from the database back in JSON format. What would be the best approach to add these dynamic div/html blocks to create new rows for each "things"?
Here is some sample html code that I have for the div responsible for "Light 1". The other rows will be very similar, but with their appropriate form actions and id's.
<div class="large-event" id="space-font">
<!-- Collapsable Button -->
<a data-toggle="collapse" data-target="#light1" href="#">
Light 1
<img src="onBulb.png" id="bulbPic1" width="25" height="40" alt="">
</a>
<!-- LIGHT 1 Collapse Material -->
<div id="light1" class="collapse out">
<div class="shift-right">
<form method="post" style="display:inline" action="/testlamp">
<input type="hidden" name="node_address" value="1">
<input type="radio" id="lampOn1" name="data_value" value="on" checked> On
<input type="radio" id="lampOff1" name="data_value" value="off"> Off
<input type="button" id="lampButton1" inline class="btn" onclick="lampStatusChange(this.id)" value="Submit">
</form>
</div>
</div>
</div>
