JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<table class="table table-striped" id="QuoteInput">
    <thead>
		<tr>
            <th colspan="2"></th>
        </tr>
    </thead>
    <tbody>
		<tr>
            <td>State</td>
            <td>
            <select id="QuoteState">
                <option value="AZ">AZ</option>
                <option value="CA">CA</option>
                <option value="OR">OR</option>
                <option value="WA">WA</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>Age Group</td>
            <td>
                <select id="QuoteAge">
                    <option value="35_45">35-45</option>
                    <option value="45_55">45-55</option>
                    <option value="55_65">55-65</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Purchase Payment</td>
            <td>
                <input type="text" id="QuotePurchase" style="width: 6em; text-align: center;">
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="button" id="QuoteSave">Save</button></td>
        </tr>
    </tbody>
</table>                        </table>

JavaScript

$(document).ready(function() {
    var QuoteHistory = Backbone.Model.extend({        
        initialize: function () {
            alert("Model initialize");
            console.log(this);
        },
        
        defaults: {
            avgHist: "",
            State: "",
            AgeGroup: "",
            Purchase: "",
            PastQuote: "",
            Date: "",
            AverageQuote: ""
        },
        
    });

    var QuoteView = Backbone.View.extend({
        el: $('#QuoteInput'),
        
        events: {
            "input td input#QuotePurchase": "udpatePurchase",
            "change #QuoteAge": "udpateQuoteAge",
            "change #QuoteState": "udpateState",
            "change #QuoteSex": "udpateModel",
            "click #QuoteSave": "udpateModel"
        },
        
        initialize: function() {
            _.bindAll(this, 'updatePurchase', 'updateQuoteAge', 'updateState');

            this.model.bind('change:Purchase', this.updatePurchase);
            this.model.bind('change:AgeGroup', this.updateQuoteAge);
            this.model.bind('change:State', this.updateState);

            console.log(this);
            
        },
        
        render: function () {
            alert("render");
                this.model.bind('change:Purchase', this.updatePurchase);
                this.model.bind('change:AgeGroup', this.updateQuoteAge);
                this.model.bind('change:State', this.updateState);
        },
        
        updatePurchase: function() {
            alert("update purchase");
            var val = this.$el.find('#QuotePurchase').val();
            this.model.set({ Purchase: val });
        },

        updateQuoteAge: function () {
            alert("update age");
            var val = this.$el.find('#QuoteAge option:selected').val();
            this.model.set({ AgeGroup: val });
        },
        
        updateState: function () {
            alert("update state");
            var val =...