title: Add frontend pagination on dynamicall created div elements
body: <p>I created 20 Divs dynamically. Now i am trying to add frontend pagination to my div's, But It is not working. I am following <a href="http://flaviusmatis.github.io/simplePagination.js" rel="nofollow noreferrer">this</a> link to add pagination to my webpage. Below is my code in which i created div's and apply pagination.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link type="text/css" href="pagination/simplePagination.css"/&gt;
    &lt;script type="text/javascript" src="pagination/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="pagination/jquery.simplePagination.js"&gt;&lt;/script&gt;  
    &lt;style&gt;
      .containerdiv{
          width: 50%;
          position:absolute;
          top: 50%;
          left:50%;
          transform: translate(-50%,-50%);
          margin-top: 30px;
      }
      .image{
          background-image: url('3332.jpg');
          height:150px;
          width: 100%;
      }
      .name{
          text-align: center;
          font-weight: bold;
          margin-top:10px;
      }
      .description{
          text-align: center;
          margin-top:20px;
      }
      a{
        text-decoration: none;    
        font-size: 20px;
        margin-left: 20px;
      }
      a:visited{
        color:blue;
      }
      a.current {
        color: red;
        font-size: 25px;
        font-weight: bold;
      }
     #pagin li {
       display: inline-block;
     }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h3 style="text-align: center;font-family: arial"&gt;Dynamically Created Div&lt;/h3&gt;
   &lt;div id="main-content" class="slider" style="width: 50%;"&gt;&lt;/div&gt;
   &lt;ul id="pagin"&gt;&lt;/ul&gt;
   &lt;script&gt;
      var dataLength = 0; 
      var names = ['rajat','kunal','naman','divyank','krishna'];
      var description = ['Rajat is a very good guy','Kunal is a very good guy','Naman is a very good guy','Divyank is a very good guy','Krishna is a very good guy'];
      for(var i=0;i&lt;5;i++){
          dataLength++;
          var mainContent = document.getElementById('main-content');
  
          var container = document.createElement('div');
          var imageDiv = document.createElement('div');
          var vendorInfoDiv = document.createElement('div');
          var vendorNameDiv = document.createElement('div');
          var vendorDescriptionDiv = document.createElement('div');
  
          vendorNameDiv.setAttribute('class','name');
          vendorNameDiv.innerHTML = names[i];     
  
          vendorDescriptionDiv.setAttribute('class','description');
          vendorDescriptionDiv.innerHTML = description[i];
  
          vendorInfoDiv.appendChild(vendorNameDiv);
          vendorInfoDiv.appendChild(vendorDescriptionDiv);
  
          imageDiv.setAttribute("class","image");
          imageDiv.setAttribute("style","background-image:url('3332.jpg')");
  
          container.setAttribute("style","height:300px;width:250px;border: 1px solid red;background-image: (100%,100%);margin-left:12px;margin-top:10px;float:left");
  
          container.appendChild(imageDiv);
          container.appendChild(vendorInfoDiv);
  
          mainContent.appendChild(container);         
          mainContent.setAttribute('class','card-container');
      }
      pageSize = 2;
      var totalPaginate = Math.round(dataLength/pageSize);
  
      for(var i=1;i&lt;=totalPaginate;i++){
          var ulist = document.getElementById('pagin');
          var list = document.createElement('li');
          var anchor = document.createElement('a');
          anchor.setAttribute('href','#');
          anchor.innerHTML = i;
          list.appendChild(anchor);
          ulist.appendChild(list);
      }
  
      showPage = function(page) {
          $(".paginate").hide();
          $(".paginate").each(function(n) {
              console.log(n);
              if (n &gt;= pageSize * (page - 1) &amp;&amp; n &lt; pageSize * page)
                  $(this).show();
          });        
      }
  
      $("#pagin li a").click(function() {
          $("#pagin li a").removeClass("current");
          $(this).addClass("current");
          showPage(parseInt($(this).text())) 
      });
      showPage(1);
   &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>Can anyone please help me to solve this issue or please suggest me any other pagination plugin.</strong></p>
  
  <p>Thanks.</p>