javascript - Display common image to multiple div -

im creating html page display same image dynamically in 2 different div using jquery.

following code :

html file:-

<div id="body" style="">    <table>        <tr>          <td>             <div class="">                 <hr style="" />                 <div id="ablumdisplayphotos">                     <input type="button" class="albumbutton" value="my albums" name="button" id="btnjoin">                      <a data-toggle="modal" data-target="#commentdiv" style="cursor:pointer;">                    //first image declared here// (success)                      <img id="imgdisplay" src="~/images/bracelets-jewelry.jpg" style="" />                   </a>                   </div>              </div              <div class="">                     <hr style="" />                 /// image changes in above div according user here                     <ul class="">                         <li><img src="~/images/bracelets-jewelry.jpg" width="100" height="100" id="imgbracelets"></li>                         <li><img src="~/images/mens-gold-bracelet.jpg" width="100" height="100" id="gold-bracelet"></li>                         <li><img src="~/images/peacock-moti_photo.jpg" width="100" height="100" id="moti_photo"></li>                         <li><img src="~/images/ring123.jpg" width="100" height="100" class="ring123"></li>                     </ul>                 </div>             </div>         </td>      </tr>    </table>  </div>  <div class="modal fade" id="commentdiv" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">   <div class="modal-dialog" style="">     <div class="modal-content">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>             <h4 class="modal-title" id="examplemodallabel">comments</h4>          </div>          <div class="modal-body" style="height: 495px;">            ////same image should displayed here//// (failed)          <img id="imgdisplay" src="~/images/bracelets-jewelry.jpg" style="" />          </div>        </div>     </div> </div> 

jquery :-

<script>     $('#imgbracelets').on({         'click': function () {             $('#imgdisp').attr('src', '../../images/bracelets-jewelry.jpg');         }     });     $('#gold-bracelet').on({         'click': function () {             $('#imgdisplay').attr('src', '../../images/mens-gold-bracelet.jpg');         }     });     $('#moti_photo').on({         'click': function () {             $('#imgdisplay').attr('src', '../../images/peacock-moti_photo.jpg');         }     });     $('#ring123').on({         'click': function () {             $('#imgdisplay').attr('src', '../../images/ring123.jpg');         }     }); </script> 

it fails display desired image in second div when user clicks button. both div must show same image.

can guide me or correct mistakes ?

there syntax error, replace code below code.

$('#imgbracelets').on({         'click', function () {             $('#imgdisp').attr('src', '../../images/bracelets-jewelry.jpg');         }     });     $('#gold-bracelet').on({         'click', function () {             $('#imgdisplay').attr('src', '../../images/mens-gold-bracelet.jpg');         }     });     $('#moti_photo').on({         'click', function () {             $('#imgdisplay').attr('src', '../../images/peacock-moti_photo.jpg');         }     });     $('#ring123').on({         'click', function () {             $('#imgdisplay').attr('src', '../../images/ring123.jpg');         }     });