jQuery addClass example

Change class name on click in jQuery

by Anchit Gupta

HTML

<div id="main-container">
  <div class="add-button">
    Add More List
  </div>
  <div class="list-container">
        
  </div>
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.add-button{
  background-color: purple;
  padding: 5px;
  text-align: center;
  margin-bottom: 10px;
}

JavaScript

var count = 0;

var listCont = $(".list-container");

function add(listToadd, type){
	for (var i=1; i <=listToadd; i++){
    var dummyElem = "<div class='common-list'>" + "List " + i  + " - " + type + "</div>";
    listCont.append(dummyElem);
	}
}

$(".add-button").click(function(){
	count = count + 1;
  var str = "count-" + count;
  console.log("add");
	add(20, str);
});

add(40, 'inital');

document.getElementsByClassName("resultsPanel").onscroll = function() {myFunction()};

function myFunction() {
  console.log("scrolled");
}