JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<ul id='scheduler-loadroutegroups'>
    <li id='d1'>
    D1
    <ul>
        <li id='p1'>P1</li>
        <li id='p2'>P2</li>
    </ul>
    </li>
    
    <li id='d2'>
    D2
    <ul>
        <li id='p3'>P3</li>
        <li id='p4'>P4</li>
    </ul>
    </li>
</ul>

CSS

li {padding-left:10px}
.selected {background: green}

JavaScript

var Developer = Backbone.Model.extend({
    initialize: function () {
        this.pets = new Backbone.Collection(this.get('pets'));
    },
    parse: function (data) {
        this.pets.reset(data.pets);
        return data;
    }
});
var Developers = Backbone.Collection.extend({
    model: Developer
});


var devs = new Developers([
    {id: 1, name: 'D1', pets: [
        {id: 1, name:'P1'},
        {id: 2, name:'P2'}
    ]},
    {id: 2, name: 'D2', pets: [
        {id: 3, name:'P3'},
        {id: 4, name:'P4'}
    ]}
]);

var DevListView =Backbone.View.extend({
    initialize: function() {
        this.inject();
    },
    
    inject: function() {
        var $el = this.$el;
        
        this.collection.each(function (model) {
            var subview = new DevView({
                el: $el.find("#d" + model.id),
                model: model
            });
        });
    }
});

var DevView = Backbone.View.extend({
    initialize: function() {
        this.inject();
    },

    inject: function() {
        var $el = this.$el;
        
        this.model.pets.each(function (model) {
            var subview = new PetView({
                el: $el.find("#p" + model.id),
                model: model
            });
        });
    }
});

var PetView = Backbone.View.extend({
    events: {
        'click ': function () {
            this.$el.toggleClass('selected');
            
            var msg = '<p>Pet '+this.model.get('id')+'</p>';
            $('body').append(msg);
        }
    }
});

var v = new DevListView({
    el: '#scheduler-loadroutegroups',
    collection: devs
});