JSFiddle - React, Tailwind, and code Playground

HTML

<form id="imagesId">        
    <input type="file" name="imageurl" value="imagefile" />
    <input type="button" id="submitButton" value="Save" />

    <input type="hidden" value="/images/Image1.png" name="Image1" />
    <input type="hidden" value="/images/Image2.png"  name="Image2" />
    <input type="hidden" value="/images/Image3.png" name="Image3" /> 
    <!-- add more inputs and check -->
</form>

JavaScript

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) {
        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.
});