Send lot of data true / false through html5 form

I'm using Node.js 6.10.0 and Mongoose 4.8. In my HTML form I have inputs and 4 SVG built with raphael.js to add event for each path created.

When I click on a SVG path, I fill the path with a color and I want to set a property true when this path is colored but I don't know how. I thought to use html5 data-* attribute but I don't know how to send data-* attribute over html form.

Here is my javascript code to add event to the first svg :

var first = Raphael('first');
plantar.setViewBox(0, 0, 750, 700, true);
plantar.setSize('100%', '100%');

var style = {
    fill: "#ddd",
    stroke: "#aaa",
    "stroke-width": 1,
    "stroke-linejoin": "round",
    cursor: "pointer"
};

var animationSpeed = 500;
var hoverStyle = {
    fill: "#A8BED5"
};

var regions = {};
regions['r1']  = first.path("m 14.233488,305.60141 6.69812,43.53774 8.37264,32.6533 42.70047,-10.04717 -8.37264,-97.12264 -17.58255,10.88443 -17.58255,9.20991 z");

...

regions['l20'] = first.path("m 674.8942,501.09873 -7.10442,43.8106 -6.51239,25.45751 -4.14425,13.61681 -8.28849,14.20884 4.73628,-102.42208 z");

for(var regionName in regions) {
    (function (region) {
        region.attr(style);
        region.node.name = regionName;

        region[0].addEventListener("click", function() {
            region.attr("fill", "#A8BED5");
        }, true);

    })(regions[regionName]);
}

I know with ajax it's easy I can send custom parameters with $('#element").data('attribute') but inside a form submit I don't know how can I do.

The aim is to fill my mongodb model. In my model I have a property named parts, it looks like this :

var meetingSchema = new Schema({
    client_id       :{ type: Schema.Types.ObjectId, ref: 'Client' },
    number          : Number,
    date            : Date,
    observations    : String,
    parts : {
        first : {
            r1  : { type: Boolean, default: false },
            r2  : { type: Boolean, default: false },
            r3  : { type: Boolean, default: false },
            r4  : { type: Boolean, default: false },
            r5  : { type: Boolean, default: false },
            r6  : { type: Boolean, default: false },
            r7  : { type: Boolean, default: false },
            r8  : { type: Boolean, default: false },
            r9  : { type: Boolean, default: false },
            r10 : { type: Boolean, default: false },
            r11 : { type: Boolean, default: false },
            r12 : { type: Boolean, default: false },
            r13 : { type: Boolean, default: false },
            r14 : { type: Boolean, default: false },
            r15 : { type: Boolean, default: false },
            r16 : { type: Boolean, default: false },
            r17 : { type: Boolean, default: false },
            r18 : { type: Boolean, default: false },
            r19 : { type: Boolean, default: false },
            r20 : { type: Boolean, default: false },
            l1  : { type: Boolean, default: false },
            l2  : { type: Boolean, default: false },
            l3  : { type: Boolean, default: false },
            l4  : { type: Boolean, default: false },
            l5  : { type: Boolean, default: false },
            l6  : { type: Boolean, default: false },
            l7  : { type: Boolean, default: false },
            l8  : { type: Boolean, default: false },
            l9  : { type: Boolean, default: false },
            l10 : { type: Boolean, default: false },
            l11 : { type: Boolean, default: false },
            l12 : { type: Boolean, default: false },
            l13 : { type: Boolean, default: false },
            l14 : { type: Boolean, default: false },
            l15 : { type: Boolean, default: false },
            l16 : { type: Boolean, default: false },
            l17 : { type: Boolean, default: false },
            l18 : { type: Boolean, default: false },
            l19 : { type: Boolean, default: false },
            l20 : { type: Boolean, default: false }
        },
        second : {
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            r3 : { type: Boolean, default: false },
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false },
            l3 : { type: Boolean, default: false }
        },
        third : {
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false }
        },
        fourth : {
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false },
            l3 : { type: Boolean, default: false },
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            r3 : { type: Boolean, default: false }
        }
    }
});

So, for example, I'd like to set the property meeting.parts.first.r1 to true when the r1 SVG path is colored.

Could you help me to find a smart way to fill my model ?

via John