JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-4">
    		<div class="row">
    			<div class="col-sm-5">
    				<b>Objectives</b>
    			</div>
    			<div class="col-sm-4">
    				<b>Status</b>
    			</div>
    			<div class="col-sm-3">
    				<b>Compl. %</b>
    			</div>
    		</div>
    		<div class="row">
    			<div id="mboTable">
				    <div id="mboName" class="col-sm-5"></div>
				    <div id="mboState" class="col-sm-4"></div>
				    <div id="mboProgress" class="col-sm-3"></div>
				</div>
    		</div>
    		<div class="row" >
    			<div class="col-sm-5">
    			<input type="text" id="mboNameInput"  class="form-control " onkeydown="addMbo(this.value)" placeholder="Your MBO...">
    			</div>
    		</div>
    	</div>

JavaScript

function addMbo(value){
	var div = document.getElementById('mboTable');
var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        event.preventDefault();
var divName = document.getElementById('mboName');
var divState = document.getElementById('mboState');
var divProgress = document.getElementById('mboProgress');

divName.innerHTML = divName.innerHTML + "<input class=form-control type=text name=mboName value='" + value + "' id=mboNamw/>"
divState.innerHTML = divState.innerHTML + "<select class=form-control ><option value=1>In Progress </option><option <value=2>Completed</option><option value=3>Cancled</option></select>"
divProgress.innerHTML = divProgress.innerHTML + "<input class=form-control type=text name=progress id=progress />"
document.getElementById('mboNameInput').value = null;

}
}