How to apply class dynamically while doing custom pagination?
<p>I have a custom pagination on my screen. 
Now the issue is while i do my pagination</p>

<ol>
<li>how do i apply the <code>active</code> <code>class</code> on moving forward and backward using pagination.</li>
<li>How do i apply <code>active</code> <code>class</code> when i click on the number.</li>
</ol>

<p>I tried with javascript but it creates conflicts as there are many same values on the page. Also if i have to add extra <code>li</code> on click of next like 8 after 7, is it possible to do it in same function?</p>

<p>Please find my working code for pagination:</p>

<p>CSS:</p>

<pre><code>/*Pagination CSS*/      

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}

/*Pagination CSS Ends here*/
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="center"&gt;
  &lt;ul class="pagination"&gt;
    &lt;li&gt;&lt;a href="#"&gt;«&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="test1" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="test2" class="active" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" onclick="test()"&gt;»&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>function test() {
    alert($('#myForm').find("input[value='" + 1 + "']").attr('id'));
    document.getElementById("test2").className = "";
    document.getElementById("test1").className = "active";
    alert("test1");
}
</code></pre>