JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<div class="row" id="quizs">
    <script type="text/template" id="quizTemplate">
        < h1 > <%= title %> < /h1>
    </script>
</div>
<button id="next">Next</button>

JavaScript

$(function () {
    var Quiz = Backbone.Model.extend({});
    var QuizList = Backbone.Collection.extend({
        model: Quiz
    });
    var quizs = {
        [{
            id: 1,
            title: "a"
        }, {
            id: 2,
            title: "b"
        }, {
            id: 3,
            title: "c"
        }, {
            id: 4,
            title: "d"
        }]
    };
    console.log("quiz", quizs);
    var QuestionView = Backbone.View.extend({
        events: {
            'click #next': 'showNextQuestion'
        },
        collection: quizs,
        initialize: function () {
            _.bindAll(this, "showNextQuestion", "render");
            this.currentIndex = 0;
            this.render();
        },
        showNextQuestion: function () {
            this.currentIndex++;
            if (this.currentIndex < this.collection.length) {
                this.render();
            }
        },
        render: function () {
            var template = _.template($("#quizTemplate").html(), this.collection.at(this.currentIndex));
            this.$el.html(template);
        }
    });
    var app = new QuestionView({
        el: $('#quizs')
    });
});