diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 0b4f4387..759a3290 100644
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/scripts/pi-hole/js/groups-adlists.js
@@ -2,217 +2,266 @@ var table;
 var groups = [];
 const token = $("#token").html();
 
-function showAlert(type, message)
-{
-    var alertElement = null;
-    var messageElement = null;
+function showAlert(type, message) {
+  var alertElement = null;
+  var messageElement = null;
 
-    switch (type)
-    {
-        case 'info':    alertElement = $('#alInfo');                                    break;
-        case 'success': alertElement = $('#alSuccess');                                 break;
-        case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn');    break;
-        case 'error':   alertElement = $('#alFailure'); messageElement = $('#err');     break;
-        default: return;
-    }
+  switch (type) {
+    case "info":
+      alertElement = $("#alInfo");
+      break;
+    case "success":
+      alertElement = $("#alSuccess");
+      break;
+    case "warning":
+      alertElement = $("#alWarning");
+      messageElement = $("#warn");
+      break;
+    case "error":
+      alertElement = $("#alFailure");
+      messageElement = $("#err");
+      break;
+    default:
+      return;
+  }
 
-    if (messageElement != null)
-        messageElement.html(message);
+  if (messageElement != null) messageElement.html(message);
 
-    alertElement.fadeIn(200);
-    alertElement.delay(8000).fadeOut(2000);
+  alertElement.fadeIn(200);
+  alertElement.delay(8000).fadeOut(2000);
 }
 
-function get_groups()
-{
-    $.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token":token },
+function get_groups() {
+  $.post(
+    "scripts/pi-hole/php/groups.php",
+    { action: "get_groups", token: token },
     function(data) {
-        groups = data.data;
-        initTable();
-    }, "json");
+      groups = data.data;
+      initTable();
+    },
+    "json"
+  );
 }
 
-$.fn.redraw = function(){
-    return $(this).each(function(){
-        var redraw = this.offsetHeight;
-    });
+$.fn.redraw = function() {
+  return $(this).each(function() {
+    var redraw = this.offsetHeight;
+  });
 };
 
-function datetime(date)
-{
-    return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
+function datetime(date) {
+  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
 }
 
 $(document).ready(function() {
+  $("#btnAdd").on("click", addAdlist);
 
-    $('#btnAdd').on('click', addAdlist);
+  get_groups();
 
-    get_groups();
-
-    $('#select').on('change', function() {
-        $("#ip-custom").val("");
-        $("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
-    });
+  $("#select").on("change", function() {
+    $("#ip-custom").val("");
+    $("#ip-custom").prop(
+      "disabled",
+      $("#select option:selected").val() !== "custom"
+    );
+  });
 });
 
-function initTable()
-{
-    table = $("#adlistsTable").DataTable( {
-        "ajax": {
-            "url": "scripts/pi-hole/php/groups.php",
-            "data": {"action": "get_adlists", "token": token},
-            "type": "POST"
-        },
-        order: [[ 1, 'asc' ]],
-        columns: [
-            { data: "address" },
-            { data: "enabled", searchable: false },
-            { data: "comment" },
-            { data: "groups", searchable: false },
-            { data: null, width: "80px", orderable: false }
-        ],
-        "drawCallback": function( settings ) {
-            $('.editAdlist').on('click', editAdlist);
-            $('.deleteAdlist').on('click', deleteAdlist);
-        },
-        "rowCallback": function( row, data ) {
-            const tooltip = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]);
-            $('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["address"]+'</code>' );
+function initTable() {
+  table = $("#adlistsTable").DataTable({
+    ajax: {
+      url: "scripts/pi-hole/php/groups.php",
+      data: { action: "get_adlists", token: token },
+      type: "POST"
+    },
+    order: [[1, "asc"]],
+    columns: [
+      { data: "address" },
+      { data: "enabled", searchable: false },
+      { data: "comment" },
+      { data: "groups", searchable: false },
+      { data: null, width: "80px", orderable: false }
+    ],
+    drawCallback: function(settings) {
+      $(".editAdlist").on("click", editAdlist);
+      $(".deleteAdlist").on("click", deleteAdlist);
+    },
+    rowCallback: function(row, data) {
+      const tooltip =
+        "Added: " +
+        datetime(data["date_added"]) +
+        "\nLast modified: " +
+        datetime(data["date_modified"]);
+      $("td:eq(0)", row).html(
+        '<code title="' + tooltip + '">' + data["address"] + "</code>"
+      );
 
-            const disabled = data["enabled"] === 0;
-            $('td:eq(1)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
-            $('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
-            
-            $('td:eq(2)', row).html( '<input id="comment" class="form-control"><input id="id" type="hidden" value="'+data["id"]+'">' );
-            $('#comment', row).val(data["comment"]);
+      const disabled = data["enabled"] === 0;
+      $("td:eq(1)", row).html(
+        '<input type="checkbox" id="status"' +
+          (disabled ? "" : " checked") +
+          ">"
+      );
+      $("#status", row).bootstrapToggle({
+        on: "Enabled",
+        off: "Disabled",
+        size: "small",
+        onstyle: "success",
+        width: "80px"
+      });
 
-            $('td:eq(3)', row).empty();
-            $('td:eq(3)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
-            var sel = $('#multiselect', row);
-            // Add all known groups
-            for (var i = 0; i < groups.length; i++) {
-                var extra = 'ID ' + groups[i].id;
-                if(!groups[i].enabled)
-                {
-                    extra += ', disabled';
-                }
-                sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
-                sel.redraw();
-            }
-            // Select assigned groups
-            sel.val(data.groups);
-            // Initialize multiselect
-            sel.multiselect({ includeSelectAllOption: true });
+      $("td:eq(2)", row).html(
+        '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
+          data["id"] +
+          '">'
+      );
+      $("#comment", row).val(data["comment"]);
 
-            let button = "<button class=\"btn btn-success btn-xs editAdlist\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-pencil\"></span>" +
-                         "</button>" +
-                         " &nbsp;" +
-                         "<button class=\"btn btn-danger btn-xs deleteAdlist\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-trash\"></span>" +
-                         "</button>";
-            $('td:eq(4)', row).html( button );
-        },
-        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
-        "stateSave": true,
-        stateSaveCallback: function(settings, data) {
-            // Store current state in client's local storage area
-            localStorage.setItem("groups-adlists-table", JSON.stringify(data));
-        },
-        stateLoadCallback: function(settings) {
-            // Receive previous state from client's local storage area
-            var data = localStorage.getItem("groups-adlists-table");
-            // Return if not available
-            if(data === null){ return null; }
-            data = JSON.parse(data);
-            // Always start on the first page to show most recent queries
-            data["start"] = 0;
-            // Always start with empty search field
-            data["search"]["search"] = "";
-            // Apply loaded state to table
-            return data;
+      $("td:eq(3)", row).empty();
+      $("td:eq(3)", row).append(
+        '<select id="multiselect" multiple="multiple"></select>'
+      );
+      var sel = $("#multiselect", row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var extra = "ID " + groups[i].id;
+        if (!groups[i].enabled) {
+          extra += ", disabled";
         }
-    });
+        sel.append(
+          $("<option />")
+            .val(groups[i].id)
+            .text(groups[i].name + " (" + extra + ")")
+        );
+        sel.redraw();
+      }
+      // Select assigned groups
+      sel.val(data.groups);
+      // Initialize multiselect
+      sel.multiselect({ includeSelectAllOption: true });
+
+      let button =
+        '<button class="btn btn-success btn-xs editAdlist" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-pencil"></span>' +
+        "</button>" +
+        " &nbsp;" +
+        '<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-trash"></span>' +
+        "</button>";
+      $("td:eq(4)", row).html(button);
+    },
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"]
+    ],
+    stateSave: true,
+    stateSaveCallback: function(settings, data) {
+      // Store current state in client's local storage area
+      localStorage.setItem("groups-adlists-table", JSON.stringify(data));
+    },
+    stateLoadCallback: function(settings) {
+      // Receive previous state from client's local storage area
+      var data = localStorage.getItem("groups-adlists-table");
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+      data = JSON.parse(data);
+      // Always start on the first page to show most recent queries
+      data["start"] = 0;
+      // Always start with empty search field
+      data["search"]["search"] = "";
+      // Apply loaded state to table
+      return data;
+    }
+  });
 }
 
-function addAdlist()
-{
-    var address = $("#address").val();
-    var comment = $("#comment").val();
+function addAdlist() {
+  var address = $("#address").val();
+  var comment = $("#comment").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "add_adlist", "address": address, "comment": comment, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                $("#address").empty();
-                $("#comment").empty();
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while adding new adlist");
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: {
+      action: "add_adlist",
+      address: address,
+      comment: comment,
+      token: token
+    },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        $("#address").empty();
+        $("#comment").empty();
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while adding new adlist");
+      console.log(exception);
+    }
+  });
 }
 
-function editAdlist()
-{
-    var tr = $(this).closest("tr");
-    var id = tr.find("#id").val();
-    var status = tr.find("#status").is(":checked") ? 1 : 0;
-    var comment = tr.find("#comment").val();
-    var groups = tr.find("#multiselect").val();
+function editAdlist() {
+  var tr = $(this).closest("tr");
+  var id = tr.find("#id").val();
+  var status = tr.find("#status").is(":checked") ? 1 : 0;
+  var comment = tr.find("#comment").val();
+  var groups = tr.find("#multiselect").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "edit_adlist", "id": id, "comment": comment, "status": status, "groups": groups, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while editing adlist with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: {
+      action: "edit_adlist",
+      id: id,
+      comment: comment,
+      status: status,
+      groups: groups,
+      token: token
+    },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while editing adlist with ID " + id);
+      console.log(exception);
+    }
+  });
 }
 
-function deleteAdlist()
-{
-    var id = $(this).attr("data-id");
+function deleteAdlist() {
+  var id = $(this).attr("data-id");
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "delete_adlist", "id": id, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while deleting adlist with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "delete_adlist", id: id, token: token },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while deleting adlist with ID " + id);
+      console.log(exception);
+    }
+  });
 }
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index b9545aba..1094fff7 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -2,217 +2,251 @@ var table;
 var groups = [];
 const token = $("#token").html();
 
-function showAlert(type, message)
-{
-    var alertElement = null;
-    var messageElement = null;
+function showAlert(type, message) {
+  var alertElement = null;
+  var messageElement = null;
 
-    switch (type)
-    {
-        case 'info':    alertElement = $('#alInfo');                                    break;
-        case 'success': alertElement = $('#alSuccess');                                 break;
-        case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn');    break;
-        case 'error':   alertElement = $('#alFailure'); messageElement = $('#err');     break;
-        default: return;
-    }
+  switch (type) {
+    case "info":
+      alertElement = $("#alInfo");
+      break;
+    case "success":
+      alertElement = $("#alSuccess");
+      break;
+    case "warning":
+      alertElement = $("#alWarning");
+      messageElement = $("#warn");
+      break;
+    case "error":
+      alertElement = $("#alFailure");
+      messageElement = $("#err");
+      break;
+    default:
+      return;
+  }
 
-    if (messageElement != null)
-        messageElement.html(message);
+  if (messageElement != null) messageElement.html(message);
 
-    alertElement.fadeIn(200);
-    alertElement.delay(8000).fadeOut(2000);
+  alertElement.fadeIn(200);
+  alertElement.delay(8000).fadeOut(2000);
 }
 
-function reload_client_suggestions()
-{
-    $.post("scripts/pi-hole/php/groups.php", { 'action': 'get_unconfigured_clients', "token":token },
+function reload_client_suggestions() {
+  $.post(
+    "scripts/pi-hole/php/groups.php",
+    { action: "get_unconfigured_clients", token: token },
     function(data) {
-        var sel = $("#select");
-        sel.empty();
-        for (var i = 0; i < data.length; i++) {
-            sel.append($('<option />').val(data[i]).text(data[i]));
-        }
-        sel.append($('<option />').val("custom").text("Custom, specified on the right"));
-    }, "json");
+      var sel = $("#select");
+      sel.empty();
+      for (var i = 0; i < data.length; i++) {
+        sel.append(
+          $("<option />")
+            .val(data[i])
+            .text(data[i])
+        );
+      }
+      sel.append(
+        $("<option />")
+          .val("custom")
+          .text("Custom, specified on the right")
+      );
+    },
+    "json"
+  );
 }
 
-function get_groups()
-{
-    $.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token":token },
+function get_groups() {
+  $.post(
+    "scripts/pi-hole/php/groups.php",
+    { action: "get_groups", token: token },
     function(data) {
-        groups = data.data;
-        initTable();
-    }, "json");
+      groups = data.data;
+      initTable();
+    },
+    "json"
+  );
 }
 
-$.fn.redraw = function(){
-    return $(this).each(function(){
-        var redraw = this.offsetHeight;
-    });
+$.fn.redraw = function() {
+  return $(this).each(function() {
+    var redraw = this.offsetHeight;
+  });
 };
 
 $(document).ready(function() {
+  $("#btnAdd").on("click", addClient);
 
-    $('#btnAdd').on('click', addClient);
+  reload_client_suggestions();
+  get_groups();
 
-    reload_client_suggestions();
-    get_groups();
-
-    $('#select').on('change', function() {
-        $("#ip-custom").val("");
-        $("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
-    });
+  $("#select").on("change", function() {
+    $("#ip-custom").val("");
+    $("#ip-custom").prop(
+      "disabled",
+      $("#select option:selected").val() !== "custom"
+    );
+  });
 });
 
-function initTable()
-{
-    table = $("#clientsTable").DataTable( {
-        "ajax": {
-            "url": "scripts/pi-hole/php/groups.php",
-            "data": {"action": "get_clients", "token": token},
-            "type": "POST"
-        },
-        order: [[ 1, 'asc' ]],
-        columns: [
-            { data: "ip" },
-            { data: "groups", searchable: false },
-            { data: null, width: "80px", orderable: false }
-        ],
-        "drawCallback": function( settings ) {
-            $('.editClient').on('click', editClient);
-            $('.deleteClient').on('click', deleteClient);
-        },
-        "rowCallback": function( row, data ) {
-            $('td:eq(0)', row).html( '<code>'+data["ip"]+'</code><input id="id" type="hidden" value="'+data["id"]+'">' );
+function initTable() {
+  table = $("#clientsTable").DataTable({
+    ajax: {
+      url: "scripts/pi-hole/php/groups.php",
+      data: { action: "get_clients", token: token },
+      type: "POST"
+    },
+    order: [[1, "asc"]],
+    columns: [
+      { data: "ip" },
+      { data: "groups", searchable: false },
+      { data: null, width: "80px", orderable: false }
+    ],
+    drawCallback: function(settings) {
+      $(".editClient").on("click", editClient);
+      $(".deleteClient").on("click", deleteClient);
+    },
+    rowCallback: function(row, data) {
+      $("td:eq(0)", row).html(
+        "<code>" +
+          data["ip"] +
+          '</code><input id="id" type="hidden" value="' +
+          data["id"] +
+          '">'
+      );
 
-            $('td:eq(1)', row).empty();
-            $('td:eq(1)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
-            var sel = $('#multiselect', row);
-            // Add all known groups
-            for (var i = 0; i < groups.length; i++) {
-                var extra = 'ID ' + groups[i].id;
-                if(!groups[i].enabled)
-                {
-                    extra += ', disabled';
-                }
-                sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
-                sel.redraw();
-            }
-            // Select assigned groups
-            sel.val(data.groups);
-            // Initialize multiselect
-            sel.multiselect({ includeSelectAllOption: true });
-
-            let button = "<button class=\"btn btn-success btn-xs editClient\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-pencil\"></span>" +
-                         "</button>" +
-                         " &nbsp;" +
-                         "<button class=\"btn btn-danger btn-xs deleteClient\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-trash\"></span>" +
-                         "</button>";
-            $('td:eq(2)', row).html( button );
-        },
-        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
-        "stateSave": true,
-        stateSaveCallback: function(settings, data) {
-            // Store current state in client's local storage area
-            localStorage.setItem("groups-clients-table", JSON.stringify(data));
-        },
-        stateLoadCallback: function(settings) {
-            // Receive previous state from client's local storage area
-            var data = localStorage.getItem("groups-clients-table");
-            // Return if not available
-            if(data === null){ return null; }
-            data = JSON.parse(data);
-            // Always start on the first page to show most recent queries
-            data["start"] = 0;
-            // Always start with empty search field
-            data["search"]["search"] = "";
-            // Apply loaded state to table
-            return data;
+      $("td:eq(1)", row).empty();
+      $("td:eq(1)", row).append(
+        '<select id="multiselect" multiple="multiple"></select>'
+      );
+      var sel = $("#multiselect", row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var extra = "ID " + groups[i].id;
+        if (!groups[i].enabled) {
+          extra += ", disabled";
         }
-    });
-}
+        sel.append(
+          $("<option />")
+            .val(groups[i].id)
+            .text(groups[i].name + " (" + extra + ")")
+        );
+        sel.redraw();
+      }
+      // Select assigned groups
+      sel.val(data.groups);
+      // Initialize multiselect
+      sel.multiselect({ includeSelectAllOption: true });
 
-function addClient()
-{
-    var ip = $("#select").val();
-    if(ip === "custom")
-    {
-        ip = $("#ip-custom").val();
+      let button =
+        '<button class="btn btn-success btn-xs editClient" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-pencil"></span>' +
+        "</button>" +
+        " &nbsp;" +
+        '<button class="btn btn-danger btn-xs deleteClient" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-trash"></span>' +
+        "</button>";
+      $("td:eq(2)", row).html(button);
+    },
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"]
+    ],
+    stateSave: true,
+    stateSaveCallback: function(settings, data) {
+      // Store current state in client's local storage area
+      localStorage.setItem("groups-clients-table", JSON.stringify(data));
+    },
+    stateLoadCallback: function(settings) {
+      // Receive previous state from client's local storage area
+      var data = localStorage.getItem("groups-clients-table");
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+      data = JSON.parse(data);
+      // Always start on the first page to show most recent queries
+      data["start"] = 0;
+      // Always start with empty search field
+      data["search"]["search"] = "";
+      // Apply loaded state to table
+      return data;
     }
-
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "add_client", "ip": ip, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                reload_client_suggestions();
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while adding new client");
-            console.log(exception);
-        }
-    });
+  });
 }
 
-function editClient()
-{
-    var tr = $(this).closest("tr");
-    var id = tr.find("#id").val();
-    var groups = tr.find("#multiselect").val();
+function addClient() {
+  var ip = $("#select").val();
+  if (ip === "custom") {
+    ip = $("#ip-custom").val();
+  }
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "edit_client", "id": id, "groups": groups, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while editing client with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "add_client", ip: ip, token: token },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        reload_client_suggestions();
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while adding new client");
+      console.log(exception);
+    }
+  });
 }
 
-function deleteClient()
-{
-    var id = $(this).attr("data-id");
+function editClient() {
+  var tr = $(this).closest("tr");
+  var id = tr.find("#id").val();
+  var groups = tr.find("#multiselect").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "delete_client", "id": id, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                reload_client_suggestions();
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while deleting client with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "edit_client", id: id, groups: groups, token: token },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while editing client with ID " + id);
+      console.log(exception);
+    }
+  });
+}
+
+function deleteClient() {
+  var id = $(this).attr("data-id");
+
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "delete_client", id: id, token: token },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        reload_client_suggestions();
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while deleting client with ID " + id);
+      console.log(exception);
+    }
+  });
 }
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index c4b4f844..712a3e84 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -2,227 +2,288 @@ var table;
 var groups = [];
 const token = $("#token").html();
 
-function showAlert(type, message)
-{
-    var alertElement = null;
-    var messageElement = null;
+function showAlert(type, message) {
+  var alertElement = null;
+  var messageElement = null;
 
-    switch (type)
-    {
-        case 'info':    alertElement = $('#alInfo');                                    break;
-        case 'success': alertElement = $('#alSuccess');                                 break;
-        case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn');    break;
-        case 'error':   alertElement = $('#alFailure'); messageElement = $('#err');     break;
-        default: return;
-    }
+  switch (type) {
+    case "info":
+      alertElement = $("#alInfo");
+      break;
+    case "success":
+      alertElement = $("#alSuccess");
+      break;
+    case "warning":
+      alertElement = $("#alWarning");
+      messageElement = $("#warn");
+      break;
+    case "error":
+      alertElement = $("#alFailure");
+      messageElement = $("#err");
+      break;
+    default:
+      return;
+  }
 
-    if (messageElement != null)
-        messageElement.html(message);
+  if (messageElement != null) messageElement.html(message);
 
-    alertElement.fadeIn(200);
-    alertElement.delay(8000).fadeOut(2000);
+  alertElement.fadeIn(200);
+  alertElement.delay(8000).fadeOut(2000);
 }
 
-function get_groups()
-{
-    $.post("scripts/pi-hole/php/groups.php", { 'action': 'get_groups', "token": token },
+function get_groups() {
+  $.post(
+    "scripts/pi-hole/php/groups.php",
+    { action: "get_groups", token: token },
     function(data) {
-        groups = data.data;
-        initTable();
-    }, "json");
+      groups = data.data;
+      initTable();
+    },
+    "json"
+  );
 }
 
-$.fn.redraw = function(){
-    return $(this).each(function(){
-        var redraw = this.offsetHeight;
-    });
+$.fn.redraw = function() {
+  return $(this).each(function() {
+    var redraw = this.offsetHeight;
+  });
 };
 
-function datetime(date)
-{
-    return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
+function datetime(date) {
+  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
 }
 
 $(document).ready(function() {
+  $("#btnAdd").on("click", addDomain);
 
-    $('#btnAdd').on('click', addDomain);
+  get_groups();
 
-    get_groups();
-
-    $('#select').on('change', function() {
-        $("#ip-custom").val("");
-        $("#ip-custom").prop( "disabled" , $( "#select option:selected" ).val() !== "custom");
-    });
+  $("#select").on("change", function() {
+    $("#ip-custom").val("");
+    $("#ip-custom").prop(
+      "disabled",
+      $("#select option:selected").val() !== "custom"
+    );
+  });
 });
 
-function initTable()
-{
-    table = $("#domainsTable").DataTable( {
-        "ajax": {
-            "url": "scripts/pi-hole/php/groups.php",
-            "data": {"action": "get_domains", "token": token},
-            "type": "POST"
-        },
-        order: [[ 1, 'asc' ]],
-        columns: [
-            { data: "domain" },
-            { data: "type", searchable: false },
-            { data: "enabled", searchable: false },
-            { data: "comment" },
-            { data: "groups", searchable: false },
-            { data: null, width: "80px", orderable: false }
-        ],
-        "drawCallback": function( settings ) {
-            $('.editDomain').on('click', editDomain);
-            $('.deleteDomain').on('click', deleteDomain);
-        },
-        "rowCallback": function( row, data ) {
-            const tooltip = 'Added: '+datetime(data["date_added"])+'\nLast modified: '+datetime(data["date_modified"]);
-            $('td:eq(0)', row).html( '<code title="'+tooltip+'">'+data["domain"]+'</code>' );
+function initTable() {
+  table = $("#domainsTable").DataTable({
+    ajax: {
+      url: "scripts/pi-hole/php/groups.php",
+      data: { action: "get_domains", token: token },
+      type: "POST"
+    },
+    order: [[1, "asc"]],
+    columns: [
+      { data: "domain" },
+      { data: "type", searchable: false },
+      { data: "enabled", searchable: false },
+      { data: "comment" },
+      { data: "groups", searchable: false },
+      { data: null, width: "80px", orderable: false }
+    ],
+    drawCallback: function(settings) {
+      $(".editDomain").on("click", editDomain);
+      $(".deleteDomain").on("click", deleteDomain);
+    },
+    rowCallback: function(row, data) {
+      const tooltip =
+        "Added: " +
+        datetime(data["date_added"]) +
+        "\nLast modified: " +
+        datetime(data["date_modified"]);
+      $("td:eq(0)", row).html(
+        '<code title="' + tooltip + '">' + data["domain"] + "</code>"
+      );
 
-            $('td:eq(1)', row).html( '<select id="type" class="form-control">'+
-                                     '<option value="0"'+(data["type"]===0?' selected':'')+'>Exact whitelist</option>'+
-                                     '<option value="1"'+(data["type"]===1?' selected':'')+'>Exact blacklist</option>'+
-                                     '<option value="2"'+(data["type"]===2?' selected':'')+'>Regex whitelist</option>'+
-                                     '<option value="3"'+(data["type"]===3?' selected':'')+'>Regex blacklist</option>'+
-                                     '</select>' );
+      $("td:eq(1)", row).html(
+        '<select id="type" class="form-control">' +
+          '<option value="0"' +
+          (data["type"] === 0 ? " selected" : "") +
+          ">Exact whitelist</option>" +
+          '<option value="1"' +
+          (data["type"] === 1 ? " selected" : "") +
+          ">Exact blacklist</option>" +
+          '<option value="2"' +
+          (data["type"] === 2 ? " selected" : "") +
+          ">Regex whitelist</option>" +
+          '<option value="3"' +
+          (data["type"] === 3 ? " selected" : "") +
+          ">Regex blacklist</option>" +
+          "</select>"
+      );
 
-            const disabled = data["enabled"] === 0;
-            $('td:eq(2)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
-            $('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
-            
-            $('td:eq(3)', row).html( '<input id="comment" class="form-control"><input id="id" type="hidden" value="'+data["id"]+'">' );
-            $('#comment', row).val(data["comment"]);
+      const disabled = data["enabled"] === 0;
+      $("td:eq(2)", row).html(
+        '<input type="checkbox" id="status"' +
+          (disabled ? "" : " checked") +
+          ">"
+      );
+      $("#status", row).bootstrapToggle({
+        on: "Enabled",
+        off: "Disabled",
+        size: "small",
+        onstyle: "success",
+        width: "80px"
+      });
 
-            $('td:eq(4)', row).empty();
-            $('td:eq(4)', row).append( '<select id="multiselect" multiple="multiple"></select>' );
-            var sel = $('#multiselect', row);
-            // Add all known groups
-            for (var i = 0; i < groups.length; i++) {
-                var extra = 'ID ' + groups[i].id;
-                if(!groups[i].enabled)
-                {
-                    extra += ', disabled';
-                }
-                sel.append($('<option />').val(groups[i].id).text(groups[i].name + ' (' + extra + ')'));
-                sel.redraw();
-            }
-            // Select assigned groups
-            sel.val(data.groups);
-            // Initialize multiselect
-            sel.multiselect({ includeSelectAllOption: true });
+      $("td:eq(3)", row).html(
+        '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
+          data["id"] +
+          '">'
+      );
+      $("#comment", row).val(data["comment"]);
 
-            let button = "<button class=\"btn btn-success btn-xs editDomain\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-pencil\"></span>" +
-                         "</button>" +
-                         " &nbsp;" +
-                         "<button class=\"btn btn-danger btn-xs deleteDomain\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-trash\"></span>" +
-                         "</button>";
-            $('td:eq(5)', row).html( button );
-        },
-        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
-        "stateSave": true,
-        stateSaveCallback: function(settings, data) {
-            // Store current state in client's local storage area
-            localStorage.setItem("groups-domains-table", JSON.stringify(data));
-        },
-        stateLoadCallback: function(settings) {
-            // Receive previous state from client's local storage area
-            var data = localStorage.getItem("groups-domains-table");
-            // Return if not available
-            if(data === null){ return null; }
-            data = JSON.parse(data);
-            // Always start on the first page to show most recent queries
-            data["start"] = 0;
-            // Always start with empty search field
-            data["search"]["search"] = "";
-            // Apply loaded state to table
-            return data;
+      $("td:eq(4)", row).empty();
+      $("td:eq(4)", row).append(
+        '<select id="multiselect" multiple="multiple"></select>'
+      );
+      var sel = $("#multiselect", row);
+      // Add all known groups
+      for (var i = 0; i < groups.length; i++) {
+        var extra = "ID " + groups[i].id;
+        if (!groups[i].enabled) {
+          extra += ", disabled";
         }
-    });
+        sel.append(
+          $("<option />")
+            .val(groups[i].id)
+            .text(groups[i].name + " (" + extra + ")")
+        );
+        sel.redraw();
+      }
+      // Select assigned groups
+      sel.val(data.groups);
+      // Initialize multiselect
+      sel.multiselect({ includeSelectAllOption: true });
+
+      let button =
+        '<button class="btn btn-success btn-xs editDomain" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-pencil"></span>' +
+        "</button>" +
+        " &nbsp;" +
+        '<button class="btn btn-danger btn-xs deleteDomain" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-trash"></span>' +
+        "</button>";
+      $("td:eq(5)", row).html(button);
+    },
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"]
+    ],
+    stateSave: true,
+    stateSaveCallback: function(settings, data) {
+      // Store current state in client's local storage area
+      localStorage.setItem("groups-domains-table", JSON.stringify(data));
+    },
+    stateLoadCallback: function(settings) {
+      // Receive previous state from client's local storage area
+      var data = localStorage.getItem("groups-domains-table");
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+      data = JSON.parse(data);
+      // Always start on the first page to show most recent queries
+      data["start"] = 0;
+      // Always start with empty search field
+      data["search"]["search"] = "";
+      // Apply loaded state to table
+      return data;
+    }
+  });
 }
 
-function addDomain()
-{
-    var domain = $("#domain").val();
-    var type = $("#type").val();
-    var comment = $("#comment").val();
+function addDomain() {
+  var domain = $("#domain").val();
+  var type = $("#type").val();
+  var comment = $("#comment").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "add_domain", "domain": domain, "type": type, "comment": comment, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                $("#domain").empty();
-                $("#comment").empty();
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while adding new domain");
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: {
+      action: "add_domain",
+      domain: domain,
+      type: type,
+      comment: comment,
+      token: token
+    },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        $("#domain").empty();
+        $("#comment").empty();
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while adding new domain");
+      console.log(exception);
+    }
+  });
 }
 
-function editDomain()
-{
-    var tr = $(this).closest("tr");
-    var id = tr.find("#id").val();
-    var type = tr.find("#type").val();
-    var status = tr.find("#status").is(":checked") ? 1 : 0;
-    var comment = tr.find("#comment").val();
-    var groups = tr.find("#multiselect").val();
+function editDomain() {
+  var tr = $(this).closest("tr");
+  var id = tr.find("#id").val();
+  var type = tr.find("#type").val();
+  var status = tr.find("#status").is(":checked") ? 1 : 0;
+  var comment = tr.find("#comment").val();
+  var groups = tr.find("#multiselect").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "edit_domain", "id": id, "type": type, "comment": comment, "status": status, "groups": groups, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while editing domain with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: {
+      action: "edit_domain",
+      id: id,
+      type: type,
+      comment: comment,
+      status: status,
+      groups: groups,
+      token: token
+    },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while editing domain with ID " + id);
+      console.log(exception);
+    }
+  });
 }
 
-function deleteDomain()
-{
-    var id = $(this).attr("data-id");
+function deleteDomain() {
+  var id = $(this).attr("data-id");
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "delete_domain", "id": id, "token":token},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while deleting domain with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "delete_domain", id: id, token: token },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while deleting domain with ID " + id);
+      console.log(exception);
+    }
+  });
 }
diff --git a/scripts/pi-hole/js/groups.js b/scripts/pi-hole/js/groups.js
index c7aecfaa..a7f9eba5 100644
--- a/scripts/pi-hole/js/groups.js
+++ b/scripts/pi-hole/js/groups.js
@@ -1,175 +1,197 @@
 var table;
 const token = $("#token").html();
 
-function showAlert(type, message)
-{
-    var alertElement = null;
-    var messageElement = null;
+function showAlert(type, message) {
+  var alertElement = null;
+  var messageElement = null;
 
-    switch (type)
-    {
-        case 'info':    alertElement = $('#alInfo');                                    break;
-        case 'success': alertElement = $('#alSuccess');                                 break;
-        case 'warning': alertElement = $('#alWarning'); messageElement = $('#warn');    break;
-        case 'error':   alertElement = $('#alFailure'); messageElement = $('#err');     break;
-        default: return;
-    }
+  switch (type) {
+    case "info":
+      alertElement = $("#alInfo");
+      break;
+    case "success":
+      alertElement = $("#alSuccess");
+      break;
+    case "warning":
+      alertElement = $("#alWarning");
+      messageElement = $("#warn");
+      break;
+    case "error":
+      alertElement = $("#alFailure");
+      messageElement = $("#err");
+      break;
+    default:
+      return;
+  }
 
-    if (messageElement != null)
-        messageElement.html(message);
+  if (messageElement != null) messageElement.html(message);
 
-    alertElement.fadeIn(200);
-    alertElement.delay(8000).fadeOut(2000);
+  alertElement.fadeIn(200);
+  alertElement.delay(8000).fadeOut(2000);
 }
 
 $(document).ready(function() {
+  $("#btnAdd").on("click", addGroup);
 
-    $('#btnAdd').on('click', addGroup);
+  table = $("#groupsTable").DataTable({
+    ajax: {
+      url: "scripts/pi-hole/php/groups.php",
+      data: { action: "get_groups", token: token },
+      type: "POST"
+    },
+    order: [[1, "asc"]],
+    columns: [
+      { data: "id", width: "60px" },
+      { data: "enabled", searchable: false },
+      { data: "name" },
+      { data: "description" },
+      { data: null, width: "60px", orderable: false }
+    ],
+    drawCallback: function(settings) {
+      $(".deleteGroup").on("click", deleteGroup);
+      $(".editGroup").on("click", editGroup);
+    },
+    rowCallback: function(row, data) {
+      const disabled = data["enabled"] === 0;
+      $("td:eq(1)", row).html(
+        '<input type="checkbox" id="status"' +
+          (disabled ? "" : " checked") +
+          ">"
+      );
+      $("#status", row).bootstrapToggle({
+        on: "Enabled",
+        off: "Disabled",
+        size: "small",
+        onstyle: "success",
+        width: "80px"
+      });
 
-    table = $("#groupsTable").DataTable( {
-        "ajax": {
-            "url": "scripts/pi-hole/php/groups.php",
-            "data": {"action": "get_groups", "token": token},
-            "type": "POST"
-        },
-        order: [[ 1, 'asc' ]],
-        columns: [
-            { data: "id", width: "60px" },
-            { data: "enabled", searchable: false },
-            { data: "name" },
-            { data: "description" },
-            { data: null, width: "60px", orderable: false }
-        ],
-        "drawCallback": function( settings ) {
-            $('.deleteGroup').on('click', deleteGroup);
-            $('.editGroup').on('click', editGroup);
-        },
-        "rowCallback": function( row, data ) {
-            const disabled = data["enabled"] === 0;
-            $('td:eq(1)', row).html( '<input type="checkbox" id="status"'+(disabled?'':' checked')+'>');
-            $('#status', row).bootstrapToggle({ on: 'Enabled', off: 'Disabled', size: 'small', onstyle: "success", width: "80px" });
+      $("td:eq(2)", row).html('<input id="name" class="form-control">');
+      $("#name", row).val(data["name"]);
 
-            $('td:eq(2)', row).html( '<input id="name" class="form-control">' );
-            $('#name', row).val( data["name"] );
+      $("td:eq(3)", row).html('<input id="desc" class="form-control">');
+      const desc = data["description"] !== null ? data["description"] : "";
+      $("#desc", row).val(desc);
 
-            $('td:eq(3)', row).html( '<input id="desc" class="form-control">' );
-            const desc = data["description"] !== null ? data["description"] : '';
-            $('#desc', row).val( desc );
-
-
-            let button = "<button class=\"btn btn-success btn-xs editGroup\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-pencil\"></span>" +
-                         "</button>";
-            if(data["id"] !== 0)
-            {
-                button +=
-                         " &nbsp;" +
-                         "<button class=\"btn btn-danger btn-xs deleteGroup\" type=\"button\" data-id='"+data["id"]+"'>" +
-                         "<span class=\"glyphicon glyphicon-trash\"></span>" +
-                         "</button>";
-            }
-            $('td:eq(4)', row).html( button );
-        },
-        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
-        "stateSave": true,
-        stateSaveCallback: function(settings, data) {
-            // Store current state in client's local storage area
-            localStorage.setItem("groups-table", JSON.stringify(data));
-        },
-        stateLoadCallback: function(settings) {
-            // Receive previous state from client's local storage area
-            var data = localStorage.getItem("groups-table");
-            // Return if not available
-            if(data === null){ return null; }
-            data = JSON.parse(data);
-            // Always start on the first page to show most recent queries
-            data["start"] = 0;
-            // Always start with empty search field
-            data["search"]["search"] = "";
-            // Apply loaded state to table
-            return data;
-        },
-    });
+      let button =
+        '<button class="btn btn-success btn-xs editGroup" type="button" data-id=\'' +
+        data["id"] +
+        "'>" +
+        '<span class="glyphicon glyphicon-pencil"></span>' +
+        "</button>";
+      if (data["id"] !== 0) {
+        button +=
+          " &nbsp;" +
+          '<button class="btn btn-danger btn-xs deleteGroup" type="button" data-id=\'' +
+          data["id"] +
+          "'>" +
+          '<span class="glyphicon glyphicon-trash"></span>' +
+          "</button>";
+      }
+      $("td:eq(4)", row).html(button);
+    },
+    lengthMenu: [
+      [10, 25, 50, 100, -1],
+      [10, 25, 50, 100, "All"]
+    ],
+    stateSave: true,
+    stateSaveCallback: function(settings, data) {
+      // Store current state in client's local storage area
+      localStorage.setItem("groups-table", JSON.stringify(data));
+    },
+    stateLoadCallback: function(settings) {
+      // Receive previous state from client's local storage area
+      var data = localStorage.getItem("groups-table");
+      // Return if not available
+      if (data === null) {
+        return null;
+      }
+      data = JSON.parse(data);
+      // Always start on the first page to show most recent queries
+      data["start"] = 0;
+      // Always start with empty search field
+      data["search"]["search"] = "";
+      // Apply loaded state to table
+      return data;
+    }
+  });
 });
 
-function addGroup()
-{
-    var name = $("#name").val();
-    var desc = $("#desc").val();
+function addGroup() {
+  var name = $("#name").val();
+  var desc = $("#desc").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "add_group", "name": name, "desc": desc},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                $("#name").empty();
-                $("#desc").empty();
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while adding new group");
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "add_group", name: name, desc: desc },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        $("#name").empty();
+        $("#desc").empty();
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while adding new group");
+      console.log(exception);
+    }
+  });
 }
 
-function editGroup()
-{
-    var tr = $(this).closest("tr");
-    var id = tr.find("td:eq(0)").html();
-    var name = tr.find("#name").val();
-    var status = tr.find("#status").is(":checked") ? 1 : 0;
-    var desc = tr.find("#desc").val();
+function editGroup() {
+  var tr = $(this).closest("tr");
+  var id = tr.find("td:eq(0)").html();
+  var name = tr.find("#name").val();
+  var status = tr.find("#status").is(":checked") ? 1 : 0;
+  var desc = tr.find("#desc").val();
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "edit_group", "id": id, "name": name, "desc": desc, "status": status},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while editing group with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: {
+      action: "edit_group",
+      id: id,
+      name: name,
+      desc: desc,
+      status: status
+    },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while editing group with ID " + id);
+      console.log(exception);
+    }
+  });
 }
 
-function deleteGroup()
-{
-    var id = $(this).attr("data-id");
+function deleteGroup() {
+  var id = $(this).attr("data-id");
 
-    showAlert('info');
-    $.ajax({
-        url: "scripts/pi-hole/php/groups.php",
-        method: "post",
-        dataType: 'json',
-        data: {"action": "delete_group", "id": id},
-        success: function(response) {
-            if (response.success) {
-                showAlert('success');
-                table.ajax.reload();
-            }
-            else
-                showAlert('error', response.message);
-        },
-        error: function(jqXHR, exception) {
-            showAlert('error', "Error while deleting group with ID "+id);
-            console.log(exception);
-        }
-    });
+  showAlert("info");
+  $.ajax({
+    url: "scripts/pi-hole/php/groups.php",
+    method: "post",
+    dataType: "json",
+    data: { action: "delete_group", id: id },
+    success: function(response) {
+      if (response.success) {
+        showAlert("success");
+        table.ajax.reload();
+      } else showAlert("error", response.message);
+    },
+    error: function(jqXHR, exception) {
+      showAlert("error", "Error while deleting group with ID " + id);
+      console.log(exception);
+    }
+  });
 }