JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
        <div class="hero-unit">
          <h1>'Why?</h1>
          <form>
            Country:
            <select id="country">
              <option value=''>Select</option>
            </select>
          </form>
        </div>

JavaScript

$(document).ready(function () {
    'use strict';

    var Country = Backbone.Model.extend();

    var Countries = Backbone.Collection.extend({ 
        model: Country
    });

    var CountryView = Backbone.View.extend({
        tagName: 'option',
        initialize: function(){
            _.bindAll(this, 'render');
        },
        render: function(){
            this.$el.attr('value',                this.model.get('cid')).html(this.model.get('name'));
            return this;
        }
    });

    var CountriesView = Backbone.View.extend({

        initialize: function(){
            _.bindAll(this, 'addOne', 'addAll');
            this.listenTo(this.collection, 'reset', this.addAll)
        },
        addOne: function(country){
            this.$el.append(
                new CountryView({model: country}).render().el);
        },
        addAll: function(){
            this.collection.each(this.addOne);
        }
    });

    var countries = new Countries();
    var countriesView = new CountriesView({el: $('#country'), collection: countries});
    countries.reset([{name: 'Argentina'}, {name: 'ireland'}, {name: 'finland'}]);
});