当我选择图像时，应使用jquery显示名称

when i click the image and click add button image name should shown on alert message.but it is now working. what i tried the code so far i attached below if i click Chocolate image alert msg displayed Chocolate same like i need to do.

this is the form

 <div class="form-group">

      <div >
           <img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal"    >

    <b>Chocolate</b>
     </div>

   <div>
     <img src="images/mango.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

  <b>Mango</b>
     </div>

       <div  >

         <img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

          <b>Venila</b>
             </div>

               <div >

                <img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

                  <b>Strawberry</b>
                  </div>

                  <div>

                 <img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100" >

            <b>MixFruit</b>


              </div>
  <input type="button" class="btn btn-info" value="ADD" onclick="add()">

               </div>
               </form>

if i click Chocolate image alert msg displayed Chocolate same like i need to do jQuery

function add()
{


if("Chocolate")

    {
    alert("Chocolate");

    }
else if("Venila")

{

    alert("Venila");
}
else if("Strawberry")

{
  alert("Strawberry");

}
else if("Mixfruit")

{
    alert("Mixfruit");
}

Try like below :

var a="";
//on click of image get id value
$("img").on("click",function(){
   a=$(this).prop('id')

});

function add() {


if(a==="Chocolate")

  {
    alert("Chocolate");

  } else if(a==="Venila")

  {

    alert("Venila");
  } else if(a==="Strawberry")

  {
    alert("Strawberry");

  } else if(a==="MixFruit")

  {
    alert("Mixfruit");
  } else{
    alert("Mango");
  }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">

  <div>
    <img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

    <b>Chocolate</b>
  </div>

  <div>
    <img src="images/mango.jpg" id="Mango" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

    <b>Mango</b>
  </div>

  <div>

    <img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

    <b>Venila</b>
  </div>

  <div>

    <img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

    <b>Strawberry</b>
  </div>

  <div>

    <img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100">

    <b>MixFruit</b>


  </div>
  <input type="button" class="btn btn-info" value="ADD" onclick="add()">

</div>
</form>

</div>

u can do it with simple javascript. for each div u can set an event listener like onclick;

for ex:

<div id="mongo" onclick="mongo()">

in js

function mongo(){
 window.alert("mongo selected");
/* ORRR document.write("mongo selected"); depending on the kind of message ur trying 
 to display */ 
  }

and u can do that for the rest of the div and yes for sure u can loop but u might not be that well in js so go ahead and do that for all the divs