How to get updated json file for new form inputs using javascript or jquery?

The problem was that $downloadAnchor holds a reference to a DOM element (a jQuery object = a DOM element wrapped in $()). When you append that element to the DOM, $downloadAnchor still refers to that same object. It doesn't magically duplicate it when you want to insert it again into the DOM, unless you .clone() it.

What you need do is to check if that anchor (thru it's ID/class) is already in the DOM, if yes, just update it's href with the new data as below.

$("#submitButton").on('click', function(e) {
    e.preventDefault();
    var $form = $("#imagesId");
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave);
    var $downloadLink = $("#download");

    if ( $downloadLink.length ) {
        $downloadLink.attr({
            'href': 'data:text/json;charset=UTF-8,' + jsonData
        });
    } else {
        $form.append(
            $("<a/>", {
                'href': 'data:text/json;charset=UTF-8,' + jsonData,
                'download': "Image.json",
                'id': 'download',
                'text': "Click here to download JSON"
            })
        );
    }
});

A demo for the above.

Edit: To be able to append each file uploaded as an input (with a unique name + value of the uploaded file) to the form, you need to do 2 things.

1. Bind a change handler to the file input, if a file is uploaded (meaning, not just a click and cancel on the file upload dialog), append it to the form as an input with the file as the value (after whatever find/replace you want to do).

2. The click handler on the $("#submitButton") would only take in all the inputs, serialize them and then create/modify the download anchor link as in my first code attempt.

Here is a demo for the above (the edit part).

var $form = $("#imagesId"); //The form
var len = $form.find('input[type="hidden"]').length; //Number of files in the form

$form.on("change", ":file", function() {
    var file = $(this).val() || false;
    if (file) {
        //Do your replace etc. here
        //.replace(/C:\\fakepath\\/i, '');
        len++;
        $form.append('<input type="hidden" value="' +file+ '"  name="image' +len+ '" />');
    }
});

$("#submitButton").on('click', function(e) {

    e.preventDefault();
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave, null, 4);
    var $downloadLink = $("#download");
    alert (jsonData);
    //Other code goes here such as create anchor, append/modify etc.
});

Link to the demo for the edits above.