Decision Tree - Editor(2)

by wrxsti85

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <button class="btn btn-primary pull-right json-gen">Generate JSON</button>
    <button class="btn btn-primary pull-right show-json" style="margin-right: 10px;">Show JSON</button>
    <br /><br />
    <ul id="json-editor">
        <li data-level="0">
            <label class="control-label">Issue</label>
            <div class="input-group">
                <input type="text" name="issue" class="form-control" /> 
                <span class="input-group-btn">
					<button class="btn btn-primary add-option" type="button">+</button>
			    </span>

            </div>
        </li>
    </ul>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

 body {
     margin: 10px;
 }

 #json-editor .nested {
     margin: 10px 0px 10px 50px;
 }

JavaScript

$(document).on('click', '#json-editor button.add-option', function(){
    var parentEL = $(this).parent().parent().parent();
    var level = parseInt($(parentEL).data('level')) + 1;
    var template = '<ul class="nested"><li data-level="' + level + '"> \
                    <div class="form-group"> \
                       <div class="input-group"> \
                           <span class="input-group-addon btn-primary button-name">&nbsp</span> \
                           <input type="text" class="form-control option-name"> \
                           <span class="input-group-btn"> \
                               <button class="btn btn-danger remove-option" type="button">&nbsp-&nbsp</button> \
                           </span> \
                       </div> \
                    </div> \
                    <ul class="nested"> \
                       <li data-level="' + level + '"> \
                        <div class="input-group"> \
                            <input type="text" name="issue" class="form-control" /> \
                            <span class="input-group-btn"> \
                                <button class="btn btn-primary add-option" type="button">+</button> \
                            </span> \
                        </div> \
                    </li></ul> \
                </li></ul>';
    $(parentEL).append(template);
});

$(document).on('click', '#json-editor button.remove-option', function(){
    var parentEL = $(this).parent().parent().parent().parent().parent();
    $(parentEL).remove();
});

$(document).on('keyup', '.nested .option-name', function(){
    var optionName = $(this).val();
    $(this).siblings('.button-name').text(optionName);
});

var mapOptions = function(issue, obj, level){
    var nObj = obj;
    issue.parent().parent().children('.nested').each(function(i, v){
        var iss = $(this).find('input[name="issue"]');
        var optionText = $(this).find('input.option-name');
        var lev = parseInt($('li',...