Getting/moving/cloning file(image) input f

Question

Im trying to make a multiple indirect upload based on popup modal with a preview table providing input details.

My method is im taking input from the popup modal to hidden input inside each row in the table body on my main form. The problem is, how can i get the file input from the popup and move it to the hidden input inside the table (i design my script to remove parent row, so the hidden input will be removed as well). I've read something about cloning the input and move the real one to the hidden form but im not quite sure how to do it or where to put it.

scripts:

$(document).ready(function(){
    //adding and removing table row dynamically based on modal input
    $(".fruit-add").click(function(){
        var fruit_pic = $("#fruit_pic_input").val();
        var fruit_pic_name = $("#fruit_pic_input").val().replace(/C:\\fakepath\\/i, '');
        var fruit_name = $("#fruit_name_input").val();
        var markup = "<tr><td>" + fruit_pic_name + "</td><td>" + fruit_name + "</td><td>" + "<input type='hidden' name='fruit_name[]' id='fruit_name' value="+ fruit_name +"></div>" + "<button type='button' class='fruit-remove'> Delete </button>" +  "</td></tr>";
        //this is where i put my hidden input
        $(".fruit-table").append(markup);
    });
    $("body").on("click",".fruit-remove",function(){
        $(this).parents("tr").remove();
    });
});

main form:

<form method="post" action="add-fruit" id="mainForm" enctype="multipart/form-data"> 
    {{ csrf_field() }}
    <div class="form-group">
        <label> Fruits </label>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>Picture</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="fruit-table">
                </tbody>
            </table>
        </div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFruit">
            Add fruit
        </button>
    </div>
    <div class="form-group text-right">
        <a href="/" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-success">Save</button>
    </div>
</form>

modal:

<!-- Modal -->
<div class="modal fade" id="addFruit" tabindex="-1" role="dialog" aria-labelledby="addFruitLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="form_fruit">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addFruitLabel">Fruit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="fruit_pic_input">Picture</label>
                        <input type="file" accept="image/*" name="fruit_pic_input" id="fruit_pic_input" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="fruit_name_input">Name</label>
                        <input type="text" class="form-control" name="fruit_name_input" id="fruit_name_input" placeholder="Name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary fruit-add" data-dismiss="modal">Add</button>
                </div>
            </div>
        </form>
    </div>
</div>

Also, how do i validate my popup modal to be both input required and only accepting image file?