How to handle the form output in a loop?

Good afternoon, colleagues!
Doing admin for a showcase site stroytara.ru. There agminata, among other things, the categories of goods and the goods themselves. They are stored in a MySQL database, from the same displayed on the website and in the admin area. Naturally, displayed in a loop.
The problem is that the below codes work well for:
a) one individual image;
b) for the first image group displayed in a loop. For the rest - does not work even input type="file".
Here, the maximum simplified codes for the categories:
<?php foreach($categories as $cat) { ?>
<div class="container">
 <!-- Avatar category -->
<?php
 $controller = new avatarController($captures[0], 'categories', 'category_avatar', $cat['category_avatar'], $cat['id']);
$controller->render_avatar();
?>
 <div class="container">
<form>
 Here we derive the characteristics of a category: id, description and so on + button to update the database
</form>
</div>
</div>
<?php } ?>

We are only interested in the time with the replacement avatar. Controller and controller method for the avatar:
class avatarController {
 protected $capture;
 protected $table;
 protected $field;
 protected $filename;
 protected $id;
 public function __construct($capture, $table, $field, $filename, $id=NULL) {
 $this->capture = $capture;
 $this->table = $table;
 $this->field = $field;
 $this->filename = $filename;
 $this->id = $id;
}
 public function render_avatar() {
ob_start();
include("tmpl/change_avatar.tpl");
 echo ob_get_clean();
}
}

Template change_avatar:
<div class="container">
the <div><?=$this->capture?></div>
 the <div><img id="preview" src="../images/<?=trim($this->filename);?>" /></div>
the <div>
 <form id="upload-image" name="upload-image" enctype="multipart/form-data">
 <div class="form-group">
 <div class="file-upload">
 <label><input type="file" name="image" id="image" data-id="<?=$this->id?>"><span>Select a file</span></label>
</div>
 <div class="file-save">
 <label><input id="save_logo" name="save_logo" type="submit"><span>Replace and save the media library</span></label>
</div>
 <input id="a_id" name="a_id" type="hidden" value="<?=$this->id?>" />
 <input id="a_field" name="a_field" type="hidden" value="<?=$this->field?>" />
 <input id="a_table" name="a_table" type="hidden" value="<?=$this->table?>" />
</div>
</form>
</div>
</div>

As planned, after selecting the file to replace the avatar image in img id="preview" is updated and stores the new images in the database is PHP. Here is the code JavaScript/Ajax to refresh the image and pass form data output of the avatar in php handler:
$(document).ready(function () {
$('#image').change(function(){
readImage(this);
});
 function readImage ( input ) {
 console.log('Reading image');
 if (input.files && input.files[0]) {
 var reader = new FileReader();
 reader.onload = function (e) {
 $('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
 $('#upload-image').on('submit',(function(e) {
e.preventDefault();
 var formData = new FormData(this);
$.ajax({
type:'POST',
 url: '.images.php',
 data: formData,
cache:false,
 contentType: false,
 processData: false,
success:function(data){
console.log('success');
window.location.reload();
},
error:function(data){
console.log(data);
}
});
}));
});

And a simple php handler (I removed from the code all the checks, the generation name and the other garbage):
$full_img_name = $_FILES['image'];
$filePath = $full_img_name['tmp_name'];
$errorCode = $full_img_name['error']; 
$id = $_POST['a_id'];
$field = $_POST['a_field'];
$table = $_POST['a_table'];
$new_avatar = new generated file name;
if (move_uploaded_file($filePath, 'images' . $new_avatar)) {
 Database::setNewAvatar($new_avatar, $table, $field, $id);
}
else {
 die('When writing the image to disk an error occurred.');
}
?>

In the method setNewAvatar just triggered the UPDATE parameter, the code will not lead, it is trivial.
March 23rd 20 at 20:11
2 answers
March 23rd 20 at 20:13
Writing for your example , sorry, I will not. But I will try to convey the essence.
You can create one function to handle arbitrary (unpredictable) large number inputo. Just when generating inputof you need to place in them the attributes that will help to identify the field in the database that is connected to this input.
Here is an example.


you hang up the handler on a CLASS, and then in that handler find out what field in the database this input is linked, and do all that is necessary is in relation to this field.
March 23rd 20 at 20:15
$('#image').change ... // handler for the first element with id="image"

In this case you have more than one. And you can't do that. But the browser from this breach does not explode, and even errors does not produce, but simply treats the first. And in the delegation and traversing you still do not know how.

But in the comments I these topics will not disclose, because they are quite voluminous.
https://learn.javascript.ru/event-delegation
https://developer.mozilla.org/ru/docs/Web/API/Docu...

Find more questions by tags JavaScriptPHP