Dynamically adding labels to map

HTML

<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="workarea">
    <div id="chartdiv"></div>														
</div>
<div class="toolbelt">
    <em>Drag labels on the map. Click them to edit or delete.</em>
</div>
<div class="toolbelt" id="update-label" style="display: none;">
    <input type="text" placeholder="Label text" class="update-label-text" />
    <input type="button" value="Update" class="update-label-button" />
    <input type="button" value="Delete" class="delete-label-button" />
</div>
<div class="toolbelt" id="new-label">
    <input type="text" placeholder="New label" class="new-label-text" />
    <input type="button" value="Add" class="new-label-button" />
</div>
<div class="toolbelt" id="code">
    <strong>CODE</strong><br />
    <textarea></textarea>
    <input type="button" value="Parse code" class="parse-code-button" />
</div>

CSS

body {
    font-size: 12px;
    font-family: Verdana;
    padding: 10px;
}
#workarea {
    width: 100%;
    height	: 500px;
    position: relative;
    overflow: hidden;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
    background: #eee;
    position: absolute;
    top: 0;
    left: 0;
}
.toolbelt {
    background: #dedede;
    border-top: 2px solid #fff;
    padding: 20px;
    font-size: 15px;
}
.toolbelt input {
    padding: 5px 8px;
}
.toolbelt input[type=text] {
    width: 500px;
}
.marker {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 10px;
    color: #000;
    cursor: pointer;
}
.marker.selected {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}
.generate-code-button {
    float: right;
}
#code textarea {
    width: 100%;
    height: 300px;
}
#code textarea.error {
    border-color: #c00;
    background: #e0000;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {

  "type": "map",
    "theme": "none",
    "pathToImages": "http://www.amcharts.com/lib/3/images/",
    "dragMap": false,
    "zoomOnDoubleClick": false,
  "dataProvider": {
         "map": "usa",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "selectedColor": "#CC0000"
  },
    "zoomControl": {
        "panControlEnabled": false,
        "zoomControlEnabled": false
    }
});

var selectedLabel;
jQuery(document).on('click', '.marker', function () {
    jQuery('#new-label').hide();
    jQuery('#update-label').fadeIn(500);
    selectedLabel = jQuery(this)
    selectedLabel.addClass('selected');
    jQuery('#update-label input:text').val(selectedLabel.html());
});

jQuery(function() {
    generateCode();
    jQuery('.new-label-button').click(function () {
        var label = $('.new-label-text').val();
        jQuery('.new-label-text').val('');
        jQuery('<div>').addClass('marker').html(label).appendTo('#workarea').draggable({
            containment: "#workarea",
            scroll: false,
            stop: generateCode
        });
        generateCode();
    });
    jQuery('.update-label-button').click(function () {
        var label = $('.update-label-text').val();
        jQuery('.update-label-text').val('');
        selectedLabel.html(label).removeClass('selected');
        jQuery('#update-label').hide();
        jQuery('#new-label').fadeIn(500);
        generateCode();
    });
    jQuery('.delete-label-button').click(function () {
        selectedLabel.fadeOut(500, function () {
            jQuery(this).remove();
        });
        jQuery('#update-label').hide();
        jQuery('#new-label').fadeIn(500);
        generateCode();
    });
    jQuery('.parse-code-button').click(function () {
        var json = jQuery('#code textarea').removeClass('error').val();
        try {
            var data = JSON.parse('{' + json + '}');
            if (undefined == data.images) {
               ...