<script type="text/template" id="crud-template">
                  <tr>
                      <td><span>@username</span></td>
                      <td><span>@password</span></td>
                      <td><span>@role</span></td>

                  </tr>
                </script>
                 <table id="#table" class="table">
                    <thead class="thead-inverse">
                      <tr>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Role</th>

                      </tr>
                    </thead>
                    <tbody>

                    </tbody>
                  </table>

//jquery
$('#btn-saveusers').on('click', function() {
                  var username = $('#username').val();
                  var password = $('#password').val();
                  var role = $('#role').val();
                  var row = String($('#crud-template').html());

                  $.ajax ({
                    type: "POST",
                    url: "create.php",
                    data: {username: username, password: password, role: role},
                    success: function(result) {
                      var result = JSON.parse(result);
                      if(result.status == 'success') {
                        alert(result.message);
                        row = row.replace("@username", username);
                        row = row.replace("@password", password);
                        row = row.replace("@role", role);
                        $('#table tbody').append(row);
                      }

                    }
                  });
             });