Click button inside table not working (only for the first row)

See more:

Javascript

PHP

Ajax

MySQL

HTML5

Hello guys, I'm new in php and javascript and I have problem. So I have table and each row I have col of inpute type date and inpute type file and input type button, when I chosse my date and also the the file and click in the button it must save my date in databse mysql and the file in a directory at the same time. so if I pick the first row it works perfectly but the next rows it's not working.

What I have tried:

here is my code :

my html code :
<pre><pre>html += '<tr><td><input type="date" id="Date_Vendu" name="Date_Vendu[]" 
                   class="form-control" value="'+data[count].datev+'" /></td>';
html += '<td><input type="file" id="file" name="file[]" /><input type="hidden" 
         id="hidden_id" name="hidden_id[]" value="'+data[count].id+'" /></td>';
html += '<td><input type="button" value="Enregistrer" class="but_upload form-control" /> 
         </td></tr>

my javascript code:

$(document).on('click', '.but_upload', function() {

        var fd = new FormData();
        var files = $('#file')[0].files[0];
        fd.append('file', files);

        var ID = $('#hidden_id').val();
        fd.append('id', ID);

        var date = $('#Date_Vendu').val();
        fd.append('datev',date);

        var index = $('#mytable').closest('tr').find('td');
        var txtvalue = $('#mytable').closest("tr").find('td:eq(5)').val()

        $.ajax({
            url: 'updateSuivi.php',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    alert('file uploaded'+' '+ID+' '+date);location.reload();
                }
                else{
                    alert('file not uploaded'+' '+txtvalue);location.reload();
                }
            },
        });
    });

and thank you in advance.