On particular javascript function call HTML control's value changes to its default value

Question

I have a form where I need such facility where user input some data in textfield and hits enter that time using jquery it should create new controls like new textfield, dropdown menu, textfield. and it works also, but it has a bug like when user input another data and hits enter that time value of previous controls, dropdown and textfield changes to its default.

Here is my code:

<script type="text/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;


}
}

</script>

HTML code:

<div class="col-sm-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>

here is jsfiddle

Answer 1

When you do innerHTML on any element, it will completely destroy what ever content already there inside the elment. Rather you should appndChild as shown below,

 var divName = document.getElementById('mboName');

     var mboName = document.createElement("INPUT");
    mboName.setAttribute("type", "text");
    mboName.setAttribute("class", "form-control");
divName.appendChild(mboName );

you can do the related changes to above code and make your things work.

See below code to add select dropdown.

var divState = document.getElementById('mboState');
var selectData = [{name:"In Progress",value:"1"},{name:"Completed",value:"2"},{name:"Cancelled",value:"3"}];
var selectList = document.createElement("select");
selectList.class = "form-control";
divState.appendChild(selectList);
for (var i = 0; i < selectData.length; i++) {
    var option = document.createElement("option");
    option.value = selectData[i].value;
    option.text = selectData[i].name;
    selectList.appendChild(option);
}