jQuery addClass example

Change class name on click in jQuery

by agapetos

HTML

<div id="controls-wrapper">
  <button id="add-row-btn">Add row</button>
</div>
<div id="working-container">

</div>

<template id="row-template">
  <div class="row">
    <button class="btn">foo</button>
    <button class="btn">foo</button>
    <button class="btn">foo</button>
    <button class="btn">foo</button>
    <button class="btn">foo</button>
  </div>
</template>

SCSS

#controls-wrapper {
  text-align: center;
  #add-row-btn {
    padding: 5px 30px;
  }
}
#controls-wrapper,
#working-container {
  margin: 10px;
  padding: 10px 20px;
  background-color: #555;
  width: 300px;
}
#working-container {
  background-color: #aaa;
  .row {
    margin-bottom: 5px;
    .btn {
      margin-right: 7px;
    }
  }
}

JavaScript

$(document).ready(function() {
	for (i = 0; i < 3; i++) {
  	let btnRowStr = '<div class="row"><button class="btn">foo</button><button class="btn">foo</button><button class="btn">foo</button><button class="btn">foo</button><button class="btn">foo</button></div>';
  	$('#working-container').append(btnRowStr);
  }
});

$('#add-row-btn').on('click', function() {
	let template = $('#row-template')[0].innerHTML;
  $(template).appendTo($('#working-container'));
});