Playlist JSON generator

Add and remove new songs, change order, export of json.

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>

<div class="tables">
  <table>
		<tbody class="sortable">
		</tbody>
	</table>
	<table class="hidden">
	  <tbody>
		  <tr id="add-row"><td><div id='add'>+</div></td><td><input></td><td><input></td></tr>
		</tbody>
	</table>
</div>

<button class="hidden">Generate</button>

CSS

.handle, #add{
    background-color: lightcoral;
    width: 30px;
    height: 30px;
		background-size: cover;
		background-size: 80px;
    background-position: center;
		cursor: all-scroll;
    text-align: center;
    font-size: 24px;
    font-family: Helvetica, sans-serif;
}

#add{
	background-color: transparent;
	cursor: pointer;
}

tr{
	display: block;
	margin-bottom: 5px;
}

table{
	border-collapse: collapse;
}

.tables{
	margin: 25px;
}

input {
	padding: 6px 10px;
	width: 100px;
}

td:nth-of-type(2) input{
	width: 200px;
}

.hidden{
	display: none;
}

.highlight{
    height: 32px;
    outline: 1px dashed lightcoral;
}

JavaScript

var playlist = {
	init: function(){
		this.cacheDom();
		this.loadJSON();
	},
	cacheDom: function(){
		this.$tbody = $('.sortable');
		this.$button = $('button');
    this.$addRow = $('#add-row');
    this.$addButton = $('#add');
    this.lineString = "<tr><td>{{{handle}}}</td><td><input value='{{title}}'></td><td><input value='{{id}}'><span class='close'>x</span></td></tr>";
		this.$tbody.sortable({placeholder: "highlight"});

	},
	bindEvents: function(){
		this.$button.click(this.toString);
    this.$addButton.click(this.addNewSong);
    this.$addRow.keypress(function(event){
    	if(event.which == 13){
      	playlist.addNewSong();
      }
    });
		$('.sortable').find('.close').click(function(){
			$(this).parent().parent().remove();
		});
	},
	loadJSON: function(){
		var url = "https://rawgit.com/spencerlarry/asdf/master/playlist.json";
		$.ajax({
			dataType: "json",
			url: url,
			success: function(data){
  			$.each(data, playlist.parseJSON);
				playlist.bindEvents();
			},
		});
	},
	parseJSON: function(key, value){
		var song = {
			handle: playlist.setImage(value),
			title: key,
			id: value
		};
		line = Mustache.render(playlist.lineString, song);
		playlist.$tbody.append(line);
		$('.hidden').show();
	},
	setImage: function(id){
		var base = "https://img.youtube.com/vi/";
		return "<div class='handle' style=\"background-image:url('"+ base + id + "/0.jpg')\"></div>";
	},
	toString: function(){
		var result = {};
		$('.sortable').find('tr').each(function(){
			var $inputs = $(this).find('input');
			var title = $inputs.eq(0).val();
			var id = $inputs.eq(1).val();
			result[title] = id;
		});
		playlist.saveFile(JSON.stringify(result));
	},
  addNewSong: function(){
  	var title = playlist.$addRow.find('input').eq(0).val();
    var value = playlist.$addRow.find('input').eq(1).val();
    playlist.$addRow.find('input').eq(0).val("");
    playlist.$addRow.find('input').eq(1).val("");
    playlist.$addRow.find('input').eq(0).focus();
  	var song =...