Select A Image From Gallery And Add Class To It And Save It To Database

I want to select an image from multiple images, add a selected class to it and then save that image id or name to my database. Images are generated dynamically using php. I want to

Solution 1:

Here is example https://jsfiddle.net/o5sb7wLq/

example.html

<div class="container">
<img id='1' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
<img id='2' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
<img id='3' class="image" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>

example.js

$(".image").on('click', function(){
    $('.image').removeClass('selected');
  $(this).addClass('selected');
  sendToDatabase($(this).attr('id'));
});

function sendToDatabase(data) {
    //$.post(saveToDatabase.php,{id: data}, function(){
    //    post request to your controler in php 
    //});
}