text: var kanban1 = new jKanban({
          element:'#demo1',
          boards  :[
              {
                  'id' : '_todo',
                  'title'  : 'Todo (2)',
                  'item': [{
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">23/7/20</span><span class="badge badge-primary f-right">medium</span>
                                  <h6>Design Dashboard</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+10</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                          {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                      ]
                  },
              {
                  'id' : '_doing',
                  'title'  : 'Doing (2)',
                  'item'  : [
                       {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                       {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              },
              {
                  'id' : '_done',
                  'title'  : 'Done (2)',
                  'item'  : [
                       {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                     {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">23/7/20</span><span class="badge badge-primary f-right">medium</span>
                                  <h6>Design Dashboard</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+10</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              }
          ]
      });
  
      var kanban2 = new jKanban({
          element : '#demo2',
          gutter  : '15px',
          click : function(el){
              alert(el.innerHTML);
          },
          boards  :[
              {
                  'id' : '_todo',
                  'title'  : 'To Do (Item only in Working)',
                  'class' : 'bg-info',
                  'dragTo' : ['_working'],
                  'item'  : [
                       {
                              'title': `
                                 <a class="kanban-box bg-light-info" href="#"><span class="date">24/7/20</span><span class="badge badge-info f-right">medium</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                       {
                              'title': `
                                 <a class="kanban-box bg-light-info" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              },
              {
                  'id' : '_working',
                  'title'  : 'Working',
                  'class' : 'bg-warning',
                  'item'  : [
                      {
                              'title': `
                                 <a class="kanban-box bg-light-warning" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                       {
                              'title': `
                                 <a class="kanban-box bg-light-warning" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              },
              {
                  'id' : '_done',
                  'title'  : 'Done (Item only in Working)',
                  'class' : 'bg-success',
                  'dragTo' : ['_working'],
                  'item'  : [
                        {
                              'title': `
                                 <a class="kanban-box bg-light-success" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                       {
                              'title': `
                                 <a class="kanban-box bg-light-success" href="#"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              }
          ]
      });
  
      var kanban3 = new jKanban({
          element : '#demo3',
          gutter  : '15px',
          click : function(el){
              alert(el.innerHTML);
          },
          boards  :[
              {
                  'id' : '_todo',
                  'title'  : 'To Do',
                  'class' : 'info',
                  'item'  : [
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                  ]
              },
              {
                  'id' : '_working',
                  'title'  : 'Working',
                  'class' : 'warning',
                  'item'  : [
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                  ]
              },
              {
                  'id' : '_done',
                  'title'  : 'Done',
                  'class' : 'success',
                  'item'  : [
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                  ]
              }
          ]
      });
  
      var toDoButton = document.getElementById('addToDo');
      toDoButton.addEventListener('click',function(){
          kanban3.addElement(
              '_todo',
              {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
          );
      });
  
      var addBoardDefault = document.getElementById('addDefault');
      addBoardDefault.addEventListener('click', function () {
          kanban3.addBoards(
              [{
                  'id' : '_default',
                  'title'  : 'Kanban Default',
                  'item'  : [
                     {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          },
                    
                      {
                              'title': `
                                 <a class="kanban-box" href="#"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Argent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="media"><img class="img-20 mr-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                    <div class="media-body">
                                      <p>Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block mr-3">
                                          <p class="f-12">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
                          }
                  ]
              }]
          )
      });
  
      var removeBoard = document.getElementById('removeBoard');
      removeBoard.addEventListener('click',function(){
          kanban3.removeBoard('_done');
      });
  