Switch List/Grid View using jquery

Building a List/Grid View Switcher with jQuery,jquery - Display records by list view / grid view

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
  <div class="buttons">
    <button class="grid"><i class="fa fa-th icon-white"></i></button>
    <button class="list"><i class="fa fa-th-list"></i></button>
  </div>

  <ul class="grid">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

CSS

#container ul {
  list-style: none;
}

#container .buttons {
  margin-bottom: 20px;
}

#container .list li {
  width: 100%;
  border-bottom: 1px dotted #CCC;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#container .grid li {
  float: left;
  width: 20%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

JavaScript

$('button').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('grid');
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid').addClass('list');
  }
});