Create assoc array from dynamically created editable label and input

A User is abled to add new label and input fields. The label is editable with jeditable. On some event (f.e. click) I´d like to get an assoc array where key is text of label and value is value of corresponding input.

Two questions:

After changing the text of a label and clicking somewhere else, the label jumps back to it´s previously set text (Description). How to configure jeditable to keep the new text which should be the key of created array?
On button click "done" I´m iterating over labels and corresponding input and pushing values to an array called "values". unfortunately this stays empty, what am I doing wrong here?

$(document).ready(function() {

    /* Add new Form Fields */
    var a = 0;

    $(".add").click(function() {
        a++;
        $(".userinput").append('<label for="'+a+'">Description</label> <input id="'+a+'" type="text" /><br/>');
    });

    /* Create Assoc array based on label and input */
    $('.done').click(function() {
        var values = [];
        $('input').each(function() {
            var $label = $("label[for='" + this.id + "']").html();
            values[$label] = $(this).val();
        });
        alert(values);
    });

    /* Make label editable */
    $(document.body).on('click', 'label', function() {
        $(this).editable({
            type: 'text'
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>

<div class="userinput"></div>
<button class="add">add new input</button>
<button class="done">done</button>

fiddle: https://jsfiddle.net/svkq95fk/1/

Solution

You're trying to use a regular array like an associative array. Use an object instead.

var values = {};  //curly brackets instead of square brackets

You are also not using Jeditable correctly. The documentation says that the first parameter must either be a url or a JavaScript function that handles the new value. The second parameter is the configurations object.

$(this).editable('the_value_handler.php', {
    type: 'text'
});
////OR
$(this).editable(function (value, settings) {
    console.log (settings);
    return value; 
}, {
    type: 'text'
});

https://jsfiddle.net/svkq95fk/2/

Personally I would use console.log instead of alert to output debug information. Popups are rather annoying.

EDIT

The documentation also says that the default behavior for clicking outside the editable element is to discard the changes. You can change this with the onblur option. https://jsfiddle.net/svkq95fk/4/

onblur : cancel Clicking outside editable area cancels changes. Clicking submit button submits changes.
onblur : submit Clicking outside editable area submits changes.
onblur : ignore Click outside editable area is ignored. Pressing ESC cancels changes. Clicking submit button submits changes.