Как усовершенствовать это код. В коде есть и фавикон и Boostrap. Просто как убрать баги дальше уже не могу [требует правки]

$(function() { 
  var account_list = { 
    Name: ['Armen', 'Gurgen', 'Levon', 'Armine', 'Hasmik', 'Artash', 'Hermine'], 
    Lastname: ['Gexamyan', 'Stepanyan', 'Petrosyan', 'Hovhannisyan', 'Simonyan', 'Hovsepyan', 'Mkhitaryan'], 
    Age: [25, 19, 18, 29, 32, 24, 22], 
    City: ['Gyumri', 'Dilijan', 'Vanadzor', 'Erevan', 'Abovyan', 'Erevan', 'Aparan'], 
    Status: [1, 0, 0, 1, 1, 0, 1] 
  }; 
  //create table 
  var tbody = $("#tbody"), 
    thead = $("#thead"), 
    checkAll = $('#checkAll'), 
    array = account_list.Name, 
    submit = $("#submit"), 
    user = [], 
    name, lastname, age, city, status; 
 
  function Createthead() { 
    var title = ["Name", "Lastname", "Age", "City", "Status", "Del", "Edit"]; 
    for (var i = 0; i < title.length; i++) { 
      $('thead tr').append($('<th />', { 
        text: title[i] 
      })); 
    } 
    addAccounts(); 
  } 
 
  function addAccounts() { 
    for (var value in array) { 
      var tr = $("<tr/ >"); 
      tr.addClass("parent_tr"); 
      tr.append("<td >" + '<input type="checkbox" name="item" class="input" >' + "</td>"); 
      for (var key in account_list) { 
        if (key === "Status") { 
          if (account_list[key][value] === 1) { 
            account_list[key][value] = "Active"; 
            tr.append("<td class='td'>" + '<span class="user-status bg-success active">' + account_list[key][value] + '</span>' + "</td>"); 
          } else { 
            account_list[key][value] = "Passive"; 
            tr.append("<td class='td'>" + '<span class="user-status bg-success passive">' + account_list[key][value] + '</span>' + "</td>"); 
          } 
        } else { 
          tr.append("<td class='td other' >" + account_list[key][value] + "</td>"); 
        } 
      } 
      tbody.append(tr); 
      tr.append("<td class='delete'>" + '<i class="fa fa-trash recycle "  aria-hidden="true"></i>' + "</td>"); 
      tr.append("<td class='change'>" + '<i class="fa fa-pencil edit " data-toggle="modal" ' + 
        'data-target="#modal"  aria-hidden="true" data-backdrop="static" data-keyboard="false"></i>' + "</td>"); 
    } 
    check(); 
    removeWithIcon(); 
    editWithIcon(); 
  } 
 
  //  start on/off checkbox 
  function check() { 
    checkAll.on('change', function() { 
      if (checkAll.is(':checked')) { 
        $(".input").prop('checked', true) 
      } else { 
        $(".input").prop('checked', false) 
      } 
    }); 
    $(".input").on('change', function() { 
      if ($('.input:checked').length === $('tbody .input').length) { 
        $("#checkAll").prop('checked', true) 
      } else { 
        $("#checkAll").prop('checked', false) 
      } 
    }); 
 
 
  } 
 
  //   End on/off checkbox 
  function enable() { 
    $('.input:checked').each(function() { 
      var val = $(this).closest('tr').find("span"); 
      val.html("Active"); 
      val.css('background-color', '#aadddd') 
    }); 
    $(".input").prop('checked', false) //unchecking this checkbox after enable 
  } 
 
  function disable() { 
    $('.input:checked').each(function() { 
      var val = $(this).closest('tr').find("span"); 
      val.html("Passive"); 
      val.css('background-color', '#FA6A6A') 
    }); 
    $(".input").prop('checked', false) //unchecking this checkbox after disable 
  } 
 
  function remove() { 
    $('.input:checked').each(function() { 
      $(this).closest('tr').fadeOut(1000, function() { 
        $(this).closest('tr').remove(); 
      }); 
    }); 
  } 
 
  function removeWithIcon() { 
    $(".recycle").on("click", function() { 
      $(this).closest('tr').remove(); 
    }); 
  } 
 
  var then; 
 
  function editWithIcon() { 
    $(".edit").on("click", function() { 
      then = this; 
      edit(this); 
    }); 
  } 
 
  function getOptionValue() { 
    $("#submit").on("click", function() { 
      var value = $('#select ').val(); 
      if (value === "Remove") { 
        remove(); 
      } 
      if (value === "Enable") { 
        enable(); 
      } 
      if (value === "Disable") { 
        disable(); 
      } 
    }); 
 
  } 
 
  function add() { 
    user = []; 
    name = $("#input_name").val(); 
    lastname = $("#input_last_name").val(); 
    age = $("#input_age").val(); 
    city = $("#input_city").val(); 
    status = $(".modal_status").is(":checked"); 
    if (status === true) { 
      status = "Active"; 
    } else { 
      status = "Passive" 
    } 
    user.push(name, lastname, age, city, status); 
 
    for (var i = 0; i < user.length; i++) { 
      var tr = $("<tr/>"); 
      tr.addClass("parent_tr"); 
      tr.append("<td>" + '<input type="checkbox" name="item" class="input" >' + "</td>"); 
      for (var j = 0; j < user.length; j++) { 
        if (user[j] === "Passive") { 
          tr.append('<td class="td">' + '<span class="user-status bg-success passive">' + user[j] + '</span>' + '</td>'); 
        } else if (user[j] === "Active") { 
          tr.append('<td class="td">' + '<span class="user-status bg-success active">' + user[j] + '</span>' + '</td>'); 
        } else { 
          tr.append('<td class="td">' + user[j] + '</td>'); 
        } 
      } 
    } 
    tr.append("<td class='delete'>" + '<i class="fa fa-trash  recycle" aria-hidden="true"></i>' + "</td>"); 
    tr.append("<td class='change'>" + '<i class="fa fa-pencil  edit" aria-hidden="true" data-toggle="modal"' + 
      ' data-target="#modal" data-backdrop="static" data-keyboard="false"></i>' + "</td>"); 
    tbody.append(tr); 
    $(".checkbox").show(); 
    removeWithIcon(); 
    editWithIcon(); 
    check(); 
  } 
 
  function clearInput() { 
    $(".modal_title_edit").html("Add User"); 
    $(".add_button").html("Add User"); 
    $(".modal_input").val(""); 
    $(".check_input").prop('checked', false); 
    $("#add_user").off("click").on("click", validate); 
    $(".checkbox").show(); 
    $(".error").hide() 
  } 
 
  function edit(elem) { 
    var closest = $(elem).closest('tr').find('.td'); 
    var count = 0; 
    closest.each(function() { 
      var text = $(this).text(); 
      $($(".modal_input")[count]).val(text); 
      count++; 
      switch (text) { 
        case "Active": 
          $(".check_input[value='Active']").prop("checked", true); 
          break; 
        case "Passive": 
          $(".check_input[value='Passive']").prop("checked", true) 
      } 
    }); 
    $("#add_user").off("click").on("click", function() { 
      replace(then) 
    }); 
    $(".modal_title_edit").html("Edit User"); 
    $(".add_button").html("Edit User"); 
    $(".checkbox").hide() 
  } 
 
  function showStatusUsers() { 
    $(".all_users").on("click", function() { 
      $(".td").closest('tr').show(); 
    }); 
    $(".active_users").on("click", function() { 
      $(".passive").each(function() { 
        $(".td").closest('tr').show(); 
        $(this).closest('tr').hide(500); 
      }); 
    }); 
    $(".passive_users").on("click", function() { 
      $(".active").each(function() { 
        $(".td").closest('tr').show(); 
        $(this).closest('tr').hide(500); 
 
      }); 
    }) 
  } 
 
  function search() { 
    $("#search").keyup(function() { 
      var current_value, 
        count = 0, 
        td = $(".td"); 
      var current_query = $(".search").val().toLowerCase(); 
      td.closest('tr').hide(); 
      td.each(function() { 
        current_value = $($(".td")[count]).text().toLowerCase(); 
        count++; 
        if (current_value.indexOf(current_query) >= 0) { 
          $(this).closest('tr').show(); 
        } 
      }) 
    }) 
  } 
 
  function replace(elem) { 
    var closest = $(elem).closest('tr').find('.td'); 
    var input = $(".modal_input"); 
    var count = 0; 
    input.each(function() { 
      var text = $(this).val(); 
      $(closest[count]).html(text); 
      count++; 
    }); 
  } 
 
  function validate() { 
 
    if ($(".modal_input").val() === "") { 
      $(".error").show() 
    } else { 
      add(); 
 
    } 
  } 
  $(".close_modal").on("click", function() { 
    clearInput(); 
  }); 
  $('#select ').on("click", function() { 
    getOptionValue(); 
  }); 
 
  $("#add_user").on("click", function() { 
 
    validate(); 
  }); 
  Createthead(); 
  showStatusUsers(); 
  search(); 
 
});

table thead { 
  background: #fbfbfb; 
} 
 
table th:first-child { 
  max-width: 32px; 
  width: 32px; 
} 
 
table tr td:last-child { 
  text-align: center; 
} 
 
.user-status { 
  padding: 4px 14px; 
  border-radius: 15px; 
} 
 
.active { 
  background-color: #aadddd; 
  text-align: center; 
  display: block; 
} 
 
.passive { 
  background-color: #FA6A6A; 
  text-align: center; 
  display: block; 
} 
 
.recycle { 
  color: red; 
  cursor: pointer; 
} 
 
.edit { 
  color: #00448F; 
  cursor: pointer; 
} 
 
.delete, 
.change { 
  width: 33px; 
} 
 
.td { 
  width: 150px; 
} 
 
.tr { 
  background: #E1E1E1; 
} 
 
.modal-title { 
  text-align: center; 
  color: #00448F; 
  font-family: cursive; 
} 
 
.modal-header { 
  background: #92D6FF; 
} 
 
.modal-footer { 
  background: #92D6FF; 
} 
 
.form_content { 
  background: #92D6FF; 
} 
 
.form_content .form-control { 
  width: 380px; 
} 
 
label input[type="radio"]~i.fa.fa-circle-o { 
  color: #c8c8c8; 
  display: inline; 
} 
 
label input[type="radio"]~i.fa.fa-dot-circle-o { 
  display: none; 
} 
 
label input[type="radio"]:checked~i.fa.fa-circle-o { 
  display: none; 
} 
 
label input[type="radio"]:checked~i.fa.fa-dot-circle-o { 
  color: #7AA3CC; 
  display: inline; 
} 
 
label:hover input[type="radio"]~i.fa { 
  color: #7AA3CC; 
} 
 
#search { 
  float: right; 
} 
 
.error { 
  text-align: center; 
  font-family: cursive; 
  color: red; 
  display: none; 
} 
 
.control-label { 
  font-weight: bold; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>Data Table</title> 
  <!-- Latest compiled and minified CSS --> 
 
  <link rel="stylesheet" href="vendor/bootstrap.min.css"> 
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 
  <!-- Your cuustom styles --> 
  <link rel="stylesheet" type="text/css" href="css/custom.css"> 
  <link rel="stylesheet" href="font/css/font-awesome.min.css"> 
  <!-- jQuery library --> 
  <script src="vendor/jquery.min.js"></script> 
  <!-- Latest compiled JavaScript --> 
  <script src="vendor/bootstrap.min.js"></script> 
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
</head> 
 
<body> 
  <!--start Modal--> 
  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close close_modal" data-dismiss="modal" aria-label="Close"><span 
                        aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title modal_title_edit" id="gridSystemModalLabel">Add User</h4> 
          <h4 class="error">All fields are require</h4> 
        </div> 
        <div class="modal-body"> 
          <form class="form-horizontal form_content" role="form"> 
 
            <div class="form-group"> 
              <label class="col-sm-2 control-label" for="input_name">Name</label> 
              <div class="col-sm-10"> 
                <input type="text" class="form-control modal_input " id="input_name" placeholder="Name" /> 
              </div> 
            </div> 
            <div class="form-group"> 
              <label class="col-sm-2 control-label" for="input_last_name">Surname</label> 
              <div class="col-sm-10"> 
                <input type="text" class="form-control modal_input" id="input_last_name" placeholder="Last Name" /> 
              </div> 
            </div> 
            <div class="form-group"> 
              <label class="col-sm-2 control-label" for="input_age">Age</label> 
              <div class="col-sm-10"> 
                <input type="number" max="100" min="0" class="form-control modal_input" id="input_age" placeholder="Age" /> 
              </div> 
            </div> 
            <div class="form-group"> 
              <label class="col-sm-2 control-label" for="input_city">City</label> 
              <div class="col-sm-10"> 
                <input type="text" class="form-control modal_input" id="input_city" placeholder="City" /> 
              </div> 
            </div> 
            <div class="form-group checkbox"> 
              <label class="col-sm-2 control-label ">Status</label> 
              <div class="col-sm-10 "> 
                <input type="checkbox" class="modal_status" data-on="On" data-off="Off" checked data-toggle="toggle" data-size="small" id="status"> 
              </div> 
            </div> 
          </form> 
          <div class="modal-footer"> 
            <button type="button" class="btn btn-default close_modal" data-dismiss="modal">Close</button> 
            <button type="button" class="btn btn-primary add_button edit_button" id="add_user">Add User</button> 
          </div> 
        </div> 
      </div> 
      <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
  </div> 
  <!-- /.modal end --> 
 
  <!--Container--> 
  <div class="container"> 
    <h1 class="text-center">Users list</h1> 
    <div class="btn-group " data-toggle="buttons"> 
      <label class="btn active all_users"> 
            <input type="radio" name='active' checked><i class="fa fa-circle-o fa-2x"></i> 
            <i class="fa fa-check-circle-o fa-2x"></i><span> All Users</span> 
        </label> 
      <label class="btn active_users"> 
            <input type="radio" name='active'><i class="fa fa-circle-o fa-2x"></i> 
            <i class="fa fa-check-circle-o fa-2x"></i><span> Active Users</span> 
        </label> 
      <label class="btn passive_users"> 
            <input type="radio" name='active'><i class="fa fa-circle-o fa-2x"></i> 
            <i class="fa fa-check-circle-o fa-2x"></i><span> Passive Users</span> 
        </label> 
    </div> 
    <div id="search"><input type="text" placeholder="Search..." class="search"></div> 
    <div class="cont"></div> 
    <table class="table table-bordered" id="table"> 
      <thead id="thead"> 
        <tr class="tr"> 
          <th> 
            <label> <input type="checkbox" name="all" id="checkAll"></label> 
 
          </th> 
        </tr> 
      </thead> 
      <tbody id="tbody"> 
 
      </tbody> 
    </table> 
    <div class="row"> 
      <div class="col-md-12"> 
        <form class="form-horizontal"> 
          <div class="form-group"> 
            <div class="col-md-2"> 
              <select class="form-control" id="select"> 
                            <option value="Enable">Enable</option> 
                            <option value="Disable">Disable</option> 
                            <option value="Remove">Remove</option> 
                        </select> 
            </div> 
            <button type="button" class="btn btn-primary" id="submit">Submit</button> 
            <button type="button" class="btn btn-primary" id="add" data-toggle="modal" data-target="#modal" data-backdrop="static" data-keyboard="false">&plus; 
                    </button> 
 
          </div> 
        </form> 
      </div> 
    </div> 
  </div> 
 
 
  <script type="text/javascript" src="js/script.js"></script> 
</body> 
 
</html>