JavaScript need delete

[gregou'z]

Hi all,
Anyone who can help me with this problem?

Demo App

If I remove the cssclass 'hidden', visually the input contains the value '--null--' but it is not transmitted in the behind
I have a lag in the arrays after the POST of the form which makes me think that the values of the input.value are not taken into account

        <form method="post" action="next.php">
            <div id="fields-wrapper">
                <div id="fields-container">
                    <div class="field-row">
                        <input type="hidden" name="nodes[]" value="n0" >
                        <input type="text" name="keys[]" value=""  placeholder="Key" required>
                        <input id="n1" type="text" name="values[]" value="" placeholder="value">
                        <button type="button" class="btn-add-subfield" onclick="addSubfield(this)">+</button>
                    </div>
                </div>
            </div>
            <input type="submit" value="Valider">
        </form>
<script>
function addSubfield(button) {
    var fieldRow = button.parentNode;
    var valueInputParent = fieldRow.querySelector('input[name="values[]"]');
    valueInputParent.value = '--null--'; // <- overriding input to '--null--' don't work.
    valueInputParent.className='hidden';

    var subfieldContainer = document.createElement('div');
    subfieldContainer.className = 'subfield-container';

    var nodeInput = document.createElement('input');
    nodeInput.type = 'hidden';
    nodeInput.name = 'nodes[]';
    nodeInput.value = valueInputParent.id

    var keyInput = document.createElement('input');
    keyInput.type = 'text';
    keyInput.name = 'keys[]';
    keyInput.placeholder = 'key';
    keyInput.required = true;

    var valueInput = document.createElement('input');
    valueInput.id = 'n' + random();
    valueInput.type = 'text';
    valueInput.name = 'values[]';
    valueInput.placeholder = 'value';

    var subfieldAddButton = document.createElement('button');
    subfieldAddButton.type = 'button';
    subfieldAddButton.className = 'btn-add-subfield';
    subfieldAddButton.innerText = '+';
    subfieldAddButton.setAttribute('onclick', 'addSubfield(this)');

    subfieldContainer.appendChild(nodeInput);
    subfieldContainer.appendChild(keyInput);
    subfieldContainer.appendChild(valueInput);
    subfieldContainer.appendChild(subfieldAddButton);
    fieldRow.appendChild(subfieldContainer);
}
<script>

<?php
$nodes = $_POST['nodes'];
$keys = $_POST['keys'];
$values = $_POST['values'];

$data = array();
for ($i = 0; $i < count($keys); $i++) {
    $node = $nodes[$i];   
    $key = $keys[$i];
    $value = $values[$i];


    if (strpos($value, ':') !== "--null--") {
        $nestedData = createNestedData($value);
        $nestedData = mergeNestedData($nestedData);
        $data = array_merge_recursive($data, $nestedData);
    } else {
        $data[$key] = $value;
    }

}
$jsonData = json_encode($data, JSON_PRETTY_PRINT);
echo var_dump($jsonData);

function createNestedData($value) {
    $pairs = explode(':', $value);
    $nestedKey = trim($pairs[0]);
    $nestedValue = trim($pairs[1]);

    if (strpos($nestedValue, ':') !== false) {
        $nestedData = createNestedData($nestedValue);
        return array($nestedKey => $nestedData);
    } else {
        return array($nestedKey => $nestedValue);
    }
}

function mergeNestedData($data) {
    $mergedData = array();
    foreach ($data as $key => $value) {
        if (is_array($value)) {
            $value = mergeNestedData($value);
            $mergedData = array_merge_recursive($mergedData, array($key => $value));
        } else {
            $mergedData[$key] = $value;
        }
    }
    return $mergedData;
}
?>

I have a lag in the tables after the POST of form;
what I get back from the script.:

{
    "k100": "v100",
    "k200": "v210",
    "k210": "v220",
    "k220": "v311",
    "k300": "v312",
    "k310": "v313",
    "k311": "v400",
    "k312": null,
    "k313": null,
    "k400": null
}

what should happen :

{
    "k100": "v100",
    "k200": null,
    "k210": "v210",
    "k220": "v220",
    "k300": null,
    "k310": null,
    "k311": "v311",
    "k312": "v312",
    "k313": "v313",
    "k400": "v400"
}

the expected end result:

{
    "k100": "v100",
    "k200": [{"k210": "v210"},{"k220": "v220"}],
    "k300":  [{"k310": [{"k311": "v311"},{"k312": "v312"},{"k313": "v313"}]}],
    "k400": "v400"
}