Displaying data with dynamic accordion

If you want to have an accordion feature to show extra data where you are displaying data from a database on an existing row, you need create set some extra attributes on the first row. One important attribute is data-target which needs to contain a dynamic value such as

data-target="#{{inv.number}}"

This then points to the second row and is referenced by

id="{{inv.number}}" 

For more information, check out this post:

https://stackoverflow.com/questions/53317916/create-bootstrap-collapsible-accordion-table-rows-that-display-dynamic-content-f

Another neat reference site is: https://codepen.io/n3k1t/pen/OJMGgyq

For sortable accordions, some js magic will be required like this:

https://jsfiddle.net/headwinds/zz3cH/