Insert The Image Sources One After Another Image

Demo I want that whenever I click on any image, then that image src should go to image with the img1 id. If the img1 id has already an image, then the image source should go to the

Solution 1:

Add unique id to the container of the blank images.

$("#myImages img[src='']") will select all the images inside #myImages elements those are having src attribute value as blank. first() will get the first from the selected elements.

Demo

$(".img").on('click', function() {
  var newsrc = $(this).attr("src");
  $("#myImages img[src='']").first().attr("src", newsrc);
});

#myImages img {
  display: block;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img class="img" src="http://www.w3schools.com/images/w3schools.png" />
<br/>
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" />
<div id="img-container">
  <img id="cropimage" />
</div>
<div id="myImages">
  <img src="" id="img1" />
  <img src="" id="img2" />
  <img src="" id="img3" />
  <img src="" id="img4" />
  <img src="" id="img5" />
</div>

If you don't want to change your HTML structure, Check this demo