JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-iOS-Style-Segmented-Controls-Segment-js/segment.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>

<script type="text/template" id="price-template">
    <span class="price"><%= '$' + price %></span> 
    <span class="interval"><%= interval %></span>
    <a class='link' href="<%= link %>">Sign Up</a>
</script>

<select class="segment-select">
  <option value="Monthly">Monthly</option>
  <option value="Annually">Annually</option>
</select>
        
<div id='contentTable'>
</div>

CSS

.ui-segment {
  color: rgb(0, 122, 255);
  border: 1px solid rgb(0, 122, 255);
  border-radius: 4px;
  display: inline-block;
  font-family: 'Lato', Georgia, Serif;
}
.ui-segment span.option.active {
  background-color: rgb(0, 122, 255);
  color: white;
}
.ui-segment span.option {
  font-size: 13px;
  padding-left: 23px;
  padding-right: 23px;
  height: 25px;
  text-align: center;
  display: inline-block;
  line-height: 25px;
  margin: 0px;
  float: left;
  cursor: pointer;
  border-right: 1px solid rgb(0, 122, 255);
}
.ui-segment span.option:last-child {
  border-right: none;
}
.segment-select {
  display: none;
}

JavaScript

$(".segment-select").Segment();

var interval = {
	MONTHLY: "monthly",
    ANNUALLY: "Annually"
};

var data = {
	monthly: [
        {price: 125, interval: 'monthly', link: 'link1'},
        {price: 45, interval: 'monthly', link: 'link2'}
    ],
    Annually: [
        {price: 300, interval: 'Annually', link: 'link3'},
        {price: 540, interval: 'Annually', link: 'link4'}
    ]
}

var ItemView = Backbone.View.extend({
    className: 'content',
    
	template: _.template($('#price-template').html()),
    
    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
        
		return this;
	}
});

var ContentTableView = Backbone.View.extend({
	el: '#contentTable',
    
    initialize: function(options) {
        options = options || {};
        
    	this.collection = new Backbone.Collection(options.data || []);
        this.items = [];
    },
    
    resetCollection: function(data) {
    	this.collection.reset(data);
        
        _.each(this.items, function(item) {
        	item.remove();
        });
        
        this.items = [];
        
        return this;
    },
    
    render: function() {
        var self = this;
        
        this.collection.forEach(function(model) {
        	var item = new ItemView({model: model});
            
            self.items.push(item);
            
            self.$el.append(item.render().$el);
        });
        
    	return this;
    }
});

var contentTableView = new ContentTableView({
	data: data[interval.MONTHLY]
});

contentTableView.render();


$('.ui-segment').on("click", '.option', function() {
	var interval = $(this).attr('value');
    
    contentTableView.resetCollection(data[interval]).render();
});