JSFiddle - React, Tailwind, and code Playground

HTML

<script id="products-template" type="text/x-handlebars-template">
    <ul>
    {{#each products}}
        {{> product}}
    {{/each}}
    </ul>
</script>

<script id="product-template" type="text/x-handlebars-template">
    <li id="{{clientId}}" class="product">
        <span class="product-name">{{name}}</span>:
        <span class="product-quantity">{{quantity}}</span>
    </li>
</script>

JavaScript

YUI().use('model', 'model-list', 'view', 'handlebars', function (Y) {
    
    Y.ProductsView = Y.Base.create('productsView', Y.View, [], {
        listTemplate: Y.Handlebars.compile(Y.one('#products-template').getContent()),
        itemTemplate: Y.Handlebars.compile(Y.one('#product-template').getContent()),
    
        initializer: function () {
            var modelList = this.get('products');

            modelList.after('add', this.addProduct, this);
            modelList.after('remove', this.removeProduct, this);
            modelList.after('*:change', this.updateProduct, this);
            modelList.after('reset', this.render, this);
        },
            
        render: function () {
            var content = this.listTemplate({
                products: this.get('products').map(function (product) {
                    return product.getAttrs(['clientId', 'name', 'quantity']);
                })
            }, {
                partials: {product: this.itemTemplate}
            });

            this.get('container').setContent(content);
            return this;
        },
            
        addProduct: function (e) {
            var listNode = this.get('container').one('ul'),
                content  = this.itemTemplate(e.model.getAttrs(['clientId', 'name', 'quantity']))

            listNode.insertBefore(content, listNode.get('children').item(e.index));
        },
            
        removeProduct: function (e) {
            var productNode = this.get('container').one('#' + e.model.get('clientId'));
            productNode.remove();
        },
            
        updateProduct: function (e) {
            var productNode = this.get('container').one('#' + e.target.get('clientId'));
            productNode.replace(this.itemTemplate(e.target.getAttrs(['clientId', 'name', 'quantity'])));
        }
    });
    
    var products, productsView;
    
    // Create initial set of products.
    products = new Y.ModelList().reset([
        {name: 'Foo',...