jQuery count to a target number only when the section appears in the browser view
<p>In <a href="http://79.170.44.120/shivams.com/" rel="nofollow noreferrer">this website</a>, if you scroll down to the "medal part"</p>

<p><a href="https://i.stack.imgur.com/tkGMi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tkGMi.png" alt="pic for help"></a></p>

<p>and refresh the page,you will see the numbers roll and stop at a target.</p>

<p>Now the problem is can we have the numbers roll only when the medal section appears in the browser view.</p>

<p>What is happening is that when the user loads the website, the numbers roll perfectly but they happen in the background. The user when he/she scrolls down to the medal section, that effect is not visible as it gets over by then and he needs to refresh the page to see the effect.</p>

<p>One guy from the community suggested this <a href="https://github.com/morr/jquery.appear" rel="nofollow noreferrer">jQuery Plugin</a>. I tried using the plugin in my JavaScript (please follow the comment in the JavaScript part of the fiddle or code)</p>

<p>Code involved :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  $.fn.countTo = function(options) {
    options = options || {};

    return $(this).each(function() {
      // set options for current element
      var settings = $.extend({}, $.fn.countTo.defaults, {
        from: $(this).data('from'),
        to: $(this).data('to'),
        speed: $(this).data('speed'),
        refreshInterval: $(this).data('refresh-interval'),
        decimals: $(this).data('decimals')
      }, options);

      // how many times to update the value, and how much to increment the value on each update
      var loops = Math.ceil(settings.speed / settings.refreshInterval),
        increment = (settings.to - settings.from) / loops;

      // references &amp; variables that will change with each update
      var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data('countTo') || {};

      $self.data('countTo', data);

      // if an existing interval can be found, clear it first
      if (data.interval) {
        clearInterval(data.interval);
      }
      data.interval = setInterval(updateTimer, settings.refreshInterval);

      // initialize the element with the starting value
      render(value);

      function updateTimer() {
        value += increment;
        loopCount++;

        render(value);

        if (typeof(settings.onUpdate) == 'function') {
          settings.onUpdate.call(self, value);
        }

        if (loopCount &gt;= loops) {
          // remove the interval
          $self.removeData('countTo');
          clearInterval(data.interval);
          value = settings.to;

          if (typeof(settings.onComplete) == 'function') {
            settings.onComplete.call(self, value);
          }
        }
      }

      function render(value) {
        var formattedValue = settings.formatter.call(self, value, settings);
        $self.html(formattedValue);
      }
    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 0, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    formatter: formatter, // handler for formatting the value before rendering
    onUpdate: null, // callback method for every time the element is updated
    onComplete: null // callback method for when the element finishes updating
  };

  function formatter(value, settings) {
    return value.toFixed(settings.decimals);
  }
}(jQuery));

jQuery(function($) {
  // custom formatting example
  $('#count-number').data('countToOptions', {
    formatter: function(value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});



// plugin for appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
  // initialise the counters
  var counters = {};
  var i = 0;
  if (singleRun) {
    // track each of the counters
    $(".timer").each(function() {
      counters[this.id] = $(this).data("to");
      i++;
    });
    // animate the counters
    $.each(counters, function(key, val) {
      $({
        countVal: 0
      }).animate({
        countVal: val
      }, {
        duration: 1500,
        easing: "linear",
        step: function() {
          // update the display
          $("#" + key).text(Math.floor(this.countVal));
        }
      });
    });
    singleRun = false;
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
  float: left;
}
.fl-rt {
  float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
a,
a:hover,
a:active {
  outline: 0px !important
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&amp;v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #888888;
  margin: 0;
}
h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  font-size: 16px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  margin: 0 0 60px 0;
}
p {
  line-height: 24px;
  margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
  text-align: center;
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 280px 0;
}
.logo {
  width: 130px;
  margin: 0 auto 35px;
}
.header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0 0 22px 0;
  color: #fff;
}
.we-create {
  padding: 0;
  margin: 35px 0 55px;
}
.wp-pic {
  margin-bottom: 20px;
}
.we-create li {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #bcbcbc;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 5px 0 0;
  padding: 0 0 0 15px;
}
.we-create li:first-child {
  background: none;
}
.start-button {
  padding-left: 0px;
}
.start-button li a {
  color: #fff;
}
.link {
  padding: 15px 35px;
  background: #7cc576;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
  text-decoration: none;
  color: #7cc576 !important;
  background: #fff;
}
.link:active,
.link:focus {
  background: #7cc576;
  text-decoration: none;
  color: #fff !important;
}
/* Team
---------------------------------*/

.team-leader-block {
  max-width: 993px;
  margin: 0 auto;
}
.team-leader-box {
  width: 30.66%;
  margin-right: 3.82979%;
  height: 490px;
  overflow: hidden;
  text-align: center;
  float: left;
}
.team-leader-box span {
  margin-bottom: 24px;
  display: block;
}
.team-leader-box:nth-of-type(3n+0) {
  margin: 0;
}
.team-leader {
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
  margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 50%;
}
.team-leader-shadow a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease-in-out;
  font-size: 20px;
  opacity: 0;
  color: #fff;
  text-decoration: none;
}
.team-leader:hover .team-leader-shadow {
  box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover .team-leader-shadow a {
  opacity: 1;
}
/*.team-leader:hover ul {
  display: block;
  opacity: 7
}*/

.team-leader img {
  display: block;
  border-radius: 50%;
}
.team-leader ul {
  display: block;
  opacity: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -14px;
  z-index: 15;
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/

.team-leader ul p2 {
  display: inline;
  font-size: 25px;
  color: blue;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}
.
/* Footer
---------------------------------*/

.footer {
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 35px 0 35px;
}
.footer-logo {
  margin: 15px auto 35px;
  width: 76px;
}
.copyright,
.credits {
  color: #cccccc;
  font-size: 14px;
  display: block;
  text-align: center;
}
.copyright a,
.credits a {
  color: #7cc576;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.delay-04s {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay-12s {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
#team.main-section.team {
  background-color: #e6e6e6;
}
/*css related to the points box*/

body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
  text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */

/* Column Grids */

/*-=-=-=-=-=-=-=-=-=-=-=- */

.team-leader-box {
  .col_half {
    width: 49%;
  }
  .col_third {
    width: 32%;
  }
  .col_fourth {
    width: 23.5%;
  }
  .col_fifth {
    width: 18.4%;
  }
  .col_sixth {
    width: 15%;
  }
  .col_three_fourth {
    width: 74.5%;
  }
  .col_twothird {
    width: 66%;
  }
  .col_half,
  .col_third,
  .col_twothird,
  .col_fourth,
  .col_three_fourth,
  .col_fifth {
    position: relative;
    display: inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  .end {
    margin-right: 0 !important;
  }
  /* Column Grids End */
  .wrapper {
    width: 980px;
    margin: 30px auto;
    position: relative;
  }
  .counter {
    background-color: #808080;
    padding: 10px 0;
    border-radius: 5px;
  }
  .count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
  }
}
.counter.col_fourth {
  background-color: #fff;
  border-radius: 10px;
}
.counter.col_fourth :hover {
  cursor: pointer;
  cursor: hand;
  color: blue;
}
.counter.col_fourth :hover {
  display: block;
  opacity: 1
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, maximum-scale=1"&gt;

  &lt;title&gt;Homepage&lt;/title&gt;
  &lt;link rel="icon" href="favicon.png" type="image/png"&gt;
  &lt;link rel="shortcut icon" href="favicon.ico" type="img/x-icon"&gt;
  &lt;!-- related to number count --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"&gt;

  &lt;link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'&gt;

  &lt;link rel="stylesheet" href="css/style1.css"&gt;

  &lt;!-- number count ends --&gt;

  &lt;link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'&gt;

  &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/font-awesome.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/responsive.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/animate.css" rel="stylesheet" type="text/css"&gt;

  &lt;!--[if IE]&gt;&lt;style type="text/css"&gt;.pie {behavior:url(PIE.htc);}&lt;/style&gt;&lt;![endif]--&gt;

  &lt;!-- &lt;script type="text/javascript" src="js/jquery.1.8.3.min.js"&gt;&lt;/script&gt; --&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-scrolltofixed.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.isotope.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/wow.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/classie.js"&gt;&lt;/script&gt;
  &lt;script src="contactform/contactform.js"&gt;&lt;/script&gt;


&lt;/head&gt;

&lt;body&gt;
  &lt;header class="header" id="header"&gt;
    &lt;!--header-start--&gt;

  &lt;/header&gt;
  &lt;!--header-end--&gt;

  &lt;section class="main-section paddind" id="Portfolio"&gt;
    &lt;!--main-section-start--&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Portfolio&lt;/h2&gt;
      &lt;h6&gt;Fresh portfolio of designs that will keep you wanting more.&lt;/h6&gt;
      &lt;div class="portfolioFilter"&gt;
        &lt;ul class="Portfolio-nav wow fadeIn delay-02s"&gt;
          &lt;li&gt;&lt;a href="#" data-filter="*" class="current"&gt;All&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".branding"&gt;Branding&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".webdesign"&gt;Web design&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".printdesign"&gt;Print design&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-filter=".photography"&gt;Photography&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;

    &lt;/div&gt;
    &lt;div class="portfolioContainer wow fadeInUp delay-04s"&gt;
      &lt;div class=" Portfolio-box printdesign"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic1.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Foto Album&lt;/h3&gt;
        &lt;p&gt;Print Design&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="Portfolio-box webdesign"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic2.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Luca Theme&lt;/h3&gt;
        &lt;p&gt;Web Design&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=" Portfolio-box branding"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic3.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Uni Sans&lt;/h3&gt;
        &lt;p&gt;Branding&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=" Portfolio-box photography"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic4.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Vinyl Record&lt;/h3&gt;
        &lt;p&gt;Photography&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=" Portfolio-box branding"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic5.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Hipster&lt;/h3&gt;
        &lt;p&gt;Branding&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=" Portfolio-box photography"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/Portfolio-pic6.jpg" alt=""&gt;
        &lt;/a&gt;
        &lt;h3&gt;Windmills&lt;/h3&gt;
        &lt;p&gt;Photography&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;!--main-section-end--&gt;



  &lt;section class="main-section team" id="team"&gt;
    &lt;!--main-section team-start--&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Medals&lt;/h2&gt;
      &lt;h6&gt;&lt;/h6&gt;
      &lt;div class="team-leader-block clearfix"&gt;
        &lt;div class="team-leader-box"&gt;
          &lt;div class="team-leader wow fadeInDown delay-03s"&gt;
            &lt;div class="team-leader-shadow"&gt;
              &lt;a href="#" data-toggle="modal" data-target="#myModal1"&gt; Click For Details&lt;/a&gt;
            &lt;/div&gt;
            &lt;img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt=""&gt;

          &lt;/div&gt;


          &lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Gold Medal Summary&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  ...

                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;


          &lt;div class="wrapper wow fadeInDown delay-05s"&gt;
            &lt;div class="counter col_fourth"&gt;
              &lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;
              &lt;h2 class="timer count-title" id="count-number1" data-to="50" data-speed="1500"&gt;&lt;/h2&gt;
              &lt;p class="count-text "&gt;points&lt;/p&gt;

            &lt;/div&gt;
          &lt;/div&gt;

        &lt;/div&gt;
        &lt;!-- update this code --&gt;
        &lt;div class="team-leader-box"&gt;
          &lt;div class="team-leader  wow fadeInDown delay-06s"&gt;
            &lt;div class="team-leader-shadow"&gt;
              &lt;a href="#" data-toggle="modal" data-target="#myModal2"&gt; Click For Details&lt;/a&gt;
            &lt;/div&gt;
            &lt;img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt=""&gt;
            &lt;!-- &lt;ul&gt; Remove this
              &lt;p2&gt;Click For Details&lt;/p2&gt;
            &lt;/ul&gt; --&gt;
          &lt;/div&gt;

          &lt;div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Silver Medal Summary&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  ...

                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div class="wrapper wow fadeInDown delay-05s"&gt;
            &lt;div class="counter col_fourth"&gt;
              &lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;
              &lt;h2 class="timer count-title" id="count-number2" data-to="30" data-speed="1500"&gt;&lt;/h2&gt;
              &lt;p class="count-text "&gt;points&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="team-leader-box"&gt;
          &lt;div class="team-leader  wow fadeInDown delay-06s"&gt;
            &lt;div class="team-leader-shadow"&gt;
              &lt;a href="#" data-toggle="modal" data-target="#myModal3"&gt; Click For Details&lt;/a&gt;
            &lt;/div&gt;
            &lt;img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt=""&gt;
            &lt;!-- &lt;ul&gt; Remove this
       &lt;p2&gt;Click For Details&lt;/p2&gt;
      &lt;/ul&gt; --&gt;
          &lt;/div&gt;

          &lt;div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Bronze Medal Summary&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                  ...

                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper wow fadeInDown delay-05s"&gt;
            &lt;div class="counter col_fourth"&gt;
              &lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;
              &lt;h2 class="timer count-title" id="count-number3" data-to="10" data-speed="1500"&gt;&lt;/h2&gt;
              &lt;p class="count-text "&gt;points&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;



        &lt;/div&gt;
        &lt;!-- team-leader-box div ends --&gt;
      &lt;/div&gt;
      &lt;!-- team-leader-block clearfix div ends --&gt;



      &lt;!-- popup div ends --&gt;
    &lt;/div&gt;
    &lt;!-- container div ends --&gt;
  &lt;/section&gt;
  &lt;!--main-section team-end--&gt;

  &lt;footer class="footer"&gt;
    &lt;div class="container"&gt;
      &lt;div class="footer-logo"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/footer-logo.png" alt=""&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;span class="copyright"&gt;&amp;copy; Knight Theme. All Rights Reserved&lt;/span&gt;
      &lt;div class="credits"&gt;

        &lt;a href="https://bootstrapmade.com/free-business-bootstrap-themes-website-templates/"&gt;Business Bootstrap Themes&lt;/a&gt; by &lt;a href="https://bootstrapmade.com/"&gt;BootstrapMade&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;

  &lt;script src="js1/index1.js"&gt;
  &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Fiddle link for above: <a href="https://jsfiddle.net/L3tntu6a/" rel="nofollow noreferrer">https://jsfiddle.net/L3tntu6a/</a></p>

<p>Help from the community: <a href="https://stackoverflow.com/questions/2540277/jquery-counter-to-count-up-to-a-target-number">Stack Overflow similar links</a></p>