jQuery addClass example

Change class name on click in jQuery

HTML

<input type="button" id="button" value="Add new" />

<ul class="items">
  <li id="a4">item with id a4</li>
  <li id="c2">item with id c2</li>
  <li id="c3">item with id c3</li>
  <li id="a1">item with id a1</li>
</ul>

JavaScript

function randID () {
	var arr = new Array("c1", "c2", "c3", "c4", "a1", "a2", "a3", "a4","a5","a6");
	var index = Math.floor(Math.random()*(arr.length));
  return arr[index];
}

$('#button').click(function() {
  
   var newID = randID();
   
   if ( $('.items').find('#'+newID).length > 0 ) {
   		//console.log("generated again. Old id was " + newID);
    
   		//generate another
      var newID = randID();   
      //console.log("new id is " + newID);
   } 
   
   $('.items').append('<li id="'+newID+'">item with id '+newID+'</li>');
  
});