{# Sample markup data: { "tx-xx-title": { "text": "Pros and cons title" }, "tx-xx-1": { "text": "Pros" }, "tx-xx-2": { "text": "Cons" }, "tx-xx-1-1": { "text": "Lorem ipsum 1-1" }, "tx-xx-1-2": { "text": "Lorem ipsum 1-2" }, "tx-xx-1-3": { "text": "Lorem ipsum 1-3" }, "tx-xx-1-4": { "text": "Lorem ipsum 1-4" }, "tx-xx-1-5": { "text": "Lorem ipsum 1-5" }, "tx-xx-1-6": { "text": "Lorem ipsum 1-6" }, "tx-xx-2-1": { "text": "Lorem ipsum 2-1" }, "tx-xx-2-2": { "text": "Lorem ipsum 2-2" }, "tx-xx-2-3": { "text": "Lorem ipsum 2-3" }, "tx-xx-2-4": { "text": "Lorem ipsum 2-4" }, "brick-1": { "color": "green" }, "brick-2": { "color": "blue" } } #} {% set ns = namespace(left=0, right=0) %} {% for i in range(20) %} {% if uniquePathsAt(elements, '1-' ~ i ~ '$') | length != 0 %} {% set ns.left = i %} {% endif %} {% if uniquePathsAt(elements, '2-' ~ i ~ '$') | length != 0 %} {% set ns.right = i %} {% endif %} {% endfor %} {% macro item_left(index, count) -%} {% set id = '1-'~index %} {% if index == count %} {% endif %} {%- endmacro %} {% macro item_right(index, count) -%} {% set id = '2-'~index %} {% if index == count %} {% endif %} {%- endmacro %} {#-------------svg starts here-------------------------#} {% for i in range(ns.left) %} {{ item_left(i + 1, ns.left) }} {% endfor %} {% for i in range(ns.right) %} {{ item_right(i + 1, ns.right) }} {% endfor %}