title: select a image from gallery and add class to it and save it to database
body: <p>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.</p>
  
  <p>I want to:</p>
  
  <ol>
  <li>image should be selected when the user clicks on the check mark.</li>
  <li>add a selected class(green checkbox) to selected image by user</li>
  <li>only 1 image can be selected</li>
  <li>add selected image id or name to database when the save button is clicked</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/ne0AS.png" alt="this is how my images look"></p>
  
  <pre><code>&lt;div class="gallery_grid uk-grid-width-medium-1-4 uk-grid-width-large-1-5" data-uk-grid="{gutter: 16}"&gt;
      &lt;div class="uk-width-medium-3-10"&gt;
          &lt;div&gt;
              &lt;div class="md-card md-card-hover"&gt;
                  &lt;div class="gallery_grid_item md-card-content"&gt;
                      &lt;div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top"&gt;&amp;#8377; 455.00
                      &lt;/div&gt;
                      &lt;div class="uk-badge uk-badge-success uk-position-absolute uk-position-top-right uk-margin-right uk-margin-top"&gt;
                          &lt;i class="material-icons"&gt;&amp;#xE86C;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;img src="assets/img/gallery/Image01.jpg" alt=""&gt;                            
                      &lt;div class="gallery_grid_image_caption"&gt;
                          &lt;div class="gallery_grid_image_menu"&gt;
                              &lt;i class="md-icon material-icons"&gt;&amp;#xE876;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;span class="gallery_image_title"&gt;In quia eos veniam aperiam ut.&lt;/span&gt;
                          &lt;span class="uk-text-muted uk-text-small"&gt;23 Jun 2016, 64KB&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;                
      &lt;/div&gt;
      &lt;div class="uk-width-medium-3-10"&gt;
          &lt;div&gt;
              &lt;div class="md-card md-card-hover"&gt;
                  &lt;div class="gallery_grid_item md-card-content"&gt;
                      &lt;div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top"&gt;&amp;#8377; 455.00
                      &lt;/div&gt;
                      &lt;img src="assets/img/gallery/Image01.jpg" alt=""&gt;                            
                      &lt;div class="gallery_grid_image_caption"&gt;
                          &lt;div class="gallery_grid_image_menu"&gt;
                              &lt;i class="md-icon material-icons"&gt;&amp;#xE876;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;span class="gallery_image_title"&gt;In quia eos veniam aperiam ut.&lt;/span&gt;
                          &lt;span class="uk-text-muted uk-text-small"&gt;23 Jun 2016, 64KB&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;                
      &lt;/div&gt;
      &lt;div class="uk-width-medium-3-10"&gt;
          &lt;div&gt;
              &lt;div class="md-card md-card-hover"&gt;
                  &lt;div class="gallery_grid_item md-card-content"&gt;
                      &lt;div class="uk-badge uk-badge-danger uk-position-absolute uk-position-top-left uk-margin-left uk-margin-top"&gt;&amp;#8377; 455.00
                      &lt;/div&gt;                        
                      &lt;img src="assets/img/gallery/Image01.jpg" alt=""&gt;                            
                      &lt;div class="gallery_grid_image_caption"&gt;
                          &lt;div class="gallery_grid_image_menu" data-uk-dropdown="{pos:'top-right'}"&gt;
                              &lt;i class="md-icon material-icons"&gt;&amp;#xE876;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;span class="gallery_image_title"&gt;In quia eos veniam aperiam ut.&lt;/span&gt;
                          &lt;span class="uk-text-muted uk-text-small"&gt;23 Jun 2016, 64KB&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;                
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>