How to count img tags each time on mouseover event

Question

I need to count div each time on mouseover event here is example

$(document).ready(function() {

  var thumb = $('.thm-img img');
  var outer = $('.mn-img');
  var full = $('.full-img');
  var count = $('.mn-img img').length;
  var count = $('.mn-img img').length;
  var sc_height = $(outer).height();

  $(thumb).mouseover(function() {

    console.log(count);
    $(full).hide();
    if (!$(this).hasClass('added')) {
      $(this).addClass('added').clone().insertAfter($(full));
      // $(outer).animate({scrollTop : sc_height + "px"},200);
    }
  });
});

.det-sl-wrp {
  display: block;
  width: 100%;
  height: 480px;
  background: #FFFFFF;
  border: 1px solid #fff;
  margin: 8px 0 8px 0;
}
.mn-img {
  position: relative;
  width: 650px;
  height: 100%;
  background: red;
  float: left;
  overflow: scroll;
}
.thumb-wrp {
  float: left;
  width: 145px;
  overflow-y: auto;
  height: 100%;
  margin: 0 0 0 8px;
}
.mn-img img {
  width: 100%;
  height: 100%;
}
.sl-lft,
.sl-rgh {
  top: 0;
  right: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}
.sl-rgh {
  left: 0;
}
.thm-img {
  width: 100%;
  display: block;
  height: 100px;
  margin: 2px 0 2px 0;
}
.thm-img img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="det-sl-wrp">
  <div class="mn-img">
    <div class="sl-lft"></div>
    <img class="full-img" src="img/img/1.jpg">
    <div class="sl-rgh"></div>
  </div>
  <div class="thumb-wrp">
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
  </div>
</div>

Answer 1

Move the var count = $('.mn-img img').length; inside the mouseover callback.

As the images are dynamically added in the DOM, the number of images need to be calculated dynamically.

Otherwise, the value of count is cached, and it'll be same even after adding multiple images dynamically.

Demo

$(document).ready(function() {

  var thumb = $('.thm-img img');
  var outer = $('.mn-img');
  var full = $('.full-img');
  var count = $('.mn-img img').length;
  var sc_height = $(outer).height();

  $(thumb).mouseover(function() {
    var count = $('.mn-img img').length;
    console.log(count);
    $(full).hide();
    if (!$(this).hasClass('added')) {
      $(this).addClass('added').clone().insertAfter($(full));
      // $(outer).animate({scrollTop : sc_height + "px"},200);
    }
  });
});

.det-sl-wrp {
  display: block;
  width: 100%;
  height: 480px;
  background: #FFFFFF;
  border: 1px solid #fff;
  margin: 8px 0 8px 0;
}
.mn-img {
  position: relative;
  width: 650px;
  height: 100%;
  background: red;
  float: left;
  overflow: scroll;
}
.thumb-wrp {
  float: left;
  width: 145px;
  overflow-y: auto;
  height: 100%;
  margin: 0 0 0 8px;
}
.mn-img img {
  width: 100%;
  height: 100%;
}
.sl-lft,
.sl-rgh {
  top: 0;
  right: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}
.sl-rgh {
  left: 0;
}
.thm-img {
  width: 100%;
  display: block;
  height: 100px;
  margin: 2px 0 2px 0;
}
.thm-img img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="det-sl-wrp">
  <div class="mn-img">
    <div class="sl-lft"></div>
    <img class="full-img" src="img/img/1.jpg">
    <div class="sl-rgh"></div>
  </div>
  <div class="thumb-wrp">
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/1.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/2.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/3.jpg">
    </div>
    <div class="thm-img">
      <img src="img/img/4.jpg">
    </div>
  </div>
</div>