how to add image on click for each list using jquery

Question

when i click on the each grid list current image will appear in the thumb list, like that four different images want to show in thumb list, I try out with this below code.

$(function() {
  var imageTag = $('<img src="" alt="">');

  $('.grid ul li').each(function() {
    $(this).on('click', function() {
      var img = $(this).find('img').attr('src');
      $('.thumb ul li').find('img').attr('src', img);
    });
  });
  $('.thumb ul li').append(imageTag);
});

body {
  padding: 0;
  margin: 0
}
img {
  max-width: 100%;
  vertical-align: middle;
}
.row {
  max-width: 900px;
  padding: 0 15px;
  width: 100%;
  margin: 0 auto
}
ul {
  overflow: hidden;
  padding: 0;
  margin: 0 -15px;
}
ul li {
  border: 1px solid #333;
  list-style: none;
  width: 25%;
  float: left;
  padding: 10px;
  margin: 0 10px 20px;
}
.thumb {
  background-color: #999;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 20px;
}
.thumb ul li {
  height: 100px;
  width: 100px;
  margin: 0 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="grid">
    <ul>
      <li>
        <img src="http://aakko.in/demo/images/1.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/2.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/3.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/4.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/5.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/6.jpg" alt="">
      </li>
    </ul>
  </div>
  <div class="thumb">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Answer 1

$(function() {
  $('.grid ul li').on('click',function(){
		var thumb = $('.thumb ul li');
		var thumbAct = $('.thumb ul li.active').length;
		var img = $(this).find('img').clone();
		thumb.eq(thumbAct).addClass('active').append(img);
	});
});

body {
  padding: 0;
  margin: 0
}
img {
  max-width: 100%;
  vertical-align: middle;
}
.row {
  max-width: 900px;
  padding: 0 15px;
  width: 100%;
  margin: 0 auto
}
ul {
  overflow: hidden;
  padding: 0;
  margin: 0 -15px;
}
ul li {
  border: 1px solid #333;
  list-style: none;
  width: 25%;
  float: left;
  padding: 10px;
  margin: 0 10px 20px;
}
.thumb {
  background-color: #999;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 20px;
}
.thumb ul li {
  height: 100px;
  width: 100px;
  margin: 0 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="grid">
    <ul>
      <li>
        <img src="http://aakko.in/demo/images/1.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/2.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/3.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/4.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/5.jpg" alt="">
      </li>
      <li>
        <img src="http://aakko.in/demo/images/6.jpg" alt="">
      </li>
    </ul>
  </div>
  <div class="thumb">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>