JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div id="dataPath"></div>
<div id="survey">
    <div id="0" data-path="0">
        <label>Go to step 1</label><input name="start" type="radio" value="1"/>
        <br/>
        <label>Go to step 2</label><input name="start" type="radio" value="2"/>
    </div>
    <div class="step" id="1" data-path="0,1">Path = 0,1 Step = 1</div>
    <div class="step" id="2" data-path="0,2">Path = 0,2 Step = 2</div>
</div>

CSS

div{border:1px solid orange; padding:3px;}
.step{display:none;}

JavaScript

$(document).ready(function(){
    var items = $('#survey div')
    var itemsByPath = {};
    // Looping though all the div items:
    
    items.each(function(i){
        var elem = $(this);
        var path = elem.data('path').split(',');
        
            console.log(path,'path');
            console.log(elem,'elem');      
            console.log(items,'items');      
        
        // Adding a data-id attribute. Required by the Quicksand plugin:
        elem.attr('data-id',i);
        
        $.each(path,function(key,value){
            
            // Removing extra whitespace:
            value = $.trim(value);
            
            if(!(value in itemsByPath)){
                // Create an empty array to hold this item:
                itemsByPath[value] = [];
            }
            
            // Each item is added to one array per tag:
            itemsByPath[value].push(elem);
        });
        
    });

    // Looping though the arrays in itemsByPath:
    $.each(itemsByPath,function(k,v){
        createList(k,v);
    });
});