Managementinterface retrieves data from database;

Table on interface is editable; replaced library.

public/misc/script.editable.table.js

@@ -126,6 +126,6 @@ $.fn.editableTableWidget.defaultOptions = {
 	cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
 					  'text-align', 'font', 'font-size', 'font-family', 'font-weight',
 					  'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
-	editor: $('<input>')
+	editor: $('<input id="editor">')
 };
 

public/misc/script.manage.js

@@ -1,7 +1,13 @@
 $(document).ready(function(){
+    // Initialize the editable-table functionality
     $('#usertable').editableTableWidget();
 
     $('#btnnewuser').click(function() {
-        $('#usertable tbody').append($('<tr><td>&lt;username&gt;</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>'));
+        var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');
+
+        $('#usertable tbody').append($('<tr><td>' + newUser + '</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>'));
+        // Call `editableTableWidget()` again to include the newly added `<tr>`
+        //   To prevent recreating multiple new editors; reference the already existing `<input>`
+        $('#usertable').editableTableWidget({editor: $('#editor')});
     });
 });