x-editable: customize an x-editable for having more field, but only one editable

Question

in these days I'm going crazy about x-editables...I can't understand how customize an x-editable to obtain a complex array of fields.

I need to create an x-editable customized, that has this behavior: a checklist (so an array of value) but with an input text field for every check item.

I need something like this (simulated with paint shop)

This x-editable when submit must produce an output like (just a retouched example)

How can I create an x-editable with this behaviour/functionality?

Pratically a collection of objects, where the object have two fields: id, number of fruit.

Thanks in advance to all.

Answer 1

Following comments, check this solution (referred to fiddle):

$('#save').on('click', function(){
    var fruits = [];
    $('.editable').each(function(i, v){
        /* store it as you like */
        var name = $(v).data('name');
        var value = $(v).editable('getValue'); //x-editable stores value under 'name' index, like {"banana": 10}
        var fruit = {"fruit_id": name, "num": value[name]}
        fruits.push(fruit);
    }).promise().done(function(){
        // promise() will wait .each() loop to finish before going ahead
        $.ajax({
            url: "/post",
            data: {fruits: fruits},
            success: frunction(data){
                /*....*/
            }
        });
    });
});

Fiddle