JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class='container'>
    		<h1>Initiative</h1>
		    </div>
    		<table id="encounter-member-list" cellspacing="0">
    			<thead>
    				<tr id="encounter-member-list-header">
    					<th>Initiative</th>
    					<th>Name</th>
    					<th>HP</th>
              <th>THP</th>
             	<th>HP Max</th> 
    					<th>Dmg dealt</th>
    					<th>&nbsp;</th>
    				</tr>
    			</thead>
    			<tbody>
    			<tr id="add-new-encounter-member">
    				<td class="encounter-member-initiative">
    					<input type="number" />
    				</td>
    				<td class="encounter-member-name">
    					<input type="text" />
    				</td>
    				<td class="encounter-member-hp">
    					<input type="number" />
    				</td>
            <td class="encounter-member-thp">
    					<input type="number" />
    				</td>
            <td class="encounter-member-mhp">
    					<input type="number" />
    				</td>
    				<td class="encounter-member-status">
    					<input type="text" />
    				</td>
    				<td class="encounter-member-add">
    					<button id="add-member-button"><i class="fa fa-plus"></i> Add</button>
    				</td>
    			</tr>
    			</tbody>
    		</table>
	    </div>

CSS

* {
	box-sizing: border-box;
}
body {
	margin: 0;
    padding: 0;
}
.container {
    padding: 1em;
    font-family: sans-serif;
}

h1, h3 {
    text-align: center;
}
h1 {
    margin-bottom: 0.5em;
}
h3 {
    color: blue;
    cursor: pointer;
    font-size: 0.8em;
}

#encounter-member-list,
#instructionsText {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

#instructionsText {
    font-size: 0.8em;
    margin-bottom:2em;
}

#encounter-member-list-header th {
	padding: 0.5em;
}
.encounter-member {
	width: 100%;
}
#encounter-member-list td {
	padding: 1em;
	text-align: left;
	border-top: 1px solid #ccc;
}

#add-new-encounter-member td {
	text-align: center;
}
#encounter-member-list .encounter-member-initiative,
#encounter-member-list .encounter-member-hp,
#encounter-member-list .encounter-member-thp,
#encounter-member-list .encounter-member-mhp{
	text-align: center;
}
#encounter-member-list .encounter-member-add,
#encounter-member-list .encounter-member-remove {
	text-align: center;
}

button {
	border-radius: 0.5em;
	padding: 0.5em 1em;
	font-size: 0.8em;
	cursor: pointer;
}
button#add-member-button{
	background-color: #58D68D;
	border-color: #28B463;
}

input {
	padding: 0.5em;
  width: 75px;
}

.hidden {
    display: none;
}

JavaScript

var Member = function(name, initiative, hp, thp, mhp, status){
	this.name = name || "";
	this.initiative = initiative || 0;
	this.hp = hp || 0;
  this.thp = thp || 0;
  this.mhp = mhp || 0;
	this.status = status || "";

	this.appendTo = function(target){
		var thisObj = this;
		var inserted = false;
		var str = "";
		str += "<tr class='encounter-member' data-init='" + this.initiative + "'>";
		str += "<td class='encounter-member-initiative' contenteditable>" + this.initiative + "</td>";
		str += "<td class='encounter-member-name' contenteditable>" + this.name + "</td>";
		str += "<td class='encounter-member-hp' contenteditable>" + this.hp + "</td>";
		str += "<td class='encounter-member-thp' contenteditable>" + this.thp + "</td>";
		str += "<td class='encounter-member-mhp' contenteditable>" + this.mhp + "</td>";
		str += "<td class='encounter-member-status' contenteditable>" + this.status + "</td>";
		str += "<td class='encounter-member-remove'><button><i class='fa fa-remove'></i> Remove</button></td>";
		str += "</tr>";
		
		$(str).insertBefore($('#add-new-encounter-member'));
		inserted = true;
		sortInitiative();
	}
}

$('#add-member-button').on('click', function(){
	//get values
	var init = $('#add-new-encounter-member .encounter-member-initiative input').val();
	var name = $('#add-new-encounter-member .encounter-member-name input').val();
	var hp = $('#add-new-encounter-member .encounter-member-hp input').val();;
	var thp = $('#add-new-encounter-member .encounter-member-thp input').val();;
	var mhp = $('#add-new-encounter-member .encounter-member-mhp input').val();;
	var status = $('#add-new-encounter-member .encounter-member-status input').val();
	
	//create and append member
	var member = new Member(name, init, hp, thp, mhp, status);
	member.appendTo('#encounter-member-list tbody');
	
	//clear inputs
	$('input').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
})

$('#encounter-member-list').on('click',...