enviPy-bayer/templates/modals/objects/manage_api_token_modal.html

<div
  class="modal fade"
  tabindex="-1"
  id="manage_api_token_modal"
  role="dialog"
  aria-labelledby="manage_api_token_modal"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h3 class="modal-title">Manage API Token</h3>
      </div>
      <div class="modal-body">
        <p>
          Requesting a Token will invalidate all potential existing tokens. The
          new token will only be shown once, so ensure to store it in secure
          place
        </p>
        <form
          id="request_api_token_form"
          accept-charset="UTF-8"
          action=""
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <p>
            <label for="token-name">Name</label>
            <input
              type="text"
              id="token-name"
              class="form-control"
              name="name"
              placeholder="Generic Token for {{ meta.user.username }}"
            />
            <label for="valid-for">Valid for (in days)</label>
            <input
              type="number"
              id="valid-for"
              class="form-control"
              name="valid-for"
              value="90"
            />
            <input type="hidden" name="hidden" value="request-api-token" />
          </p>
        </form>
        <div id="new-token">
          <pre id="new-token-pre"></pre>
        </div>
        <div id="existing-tokens">
          {% for t in tokens %}
            <form
              id="delete-token-{{ forloop.counter0 }}"
              accept-charset="UTF-8"
              action="{{ meta.user.url }}"
              data-remote="true"
              method="post"
            >
              {% csrf_token %}
              <div class="input-group">
                <input type="hidden" name="hidden" value="delete" />
                <input type="hidden" name="token-id" value="{{ t.pk }}" />
                <input
                  type="text"
                  class="form-control"
                  value="{{ t.name|safe }}"
                  disabled
                />
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-danger">Delete</button>
                </span>
              </div>
            </form>
          {% endfor %}
        </div>
      </div>
      <div class="modal-footer">
        <a id="manage_api_token_form_submit" class="btn btn-primary" href="#"
          >Submit</a
        >
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    $("#new-token").hide();

    $("#manage_api_token_form_submit").on("click", function (e) {
      e.preventDefault();

      const formData = $("#request_api_token_form").serialize();
      $.post("", formData, function (response) {
        $("#new-token-pre").text(response.raw_token);
        $("#new-token").show();
      });
    });

    // Select all elements that start with 'delete-token-'
    $("[id^='delete-token-']").on("submit", function (e) {
      e.preventDefault();
      const formData = $(this).serialize();
      const form = $(this);
      $.post(this.action, formData, function (response) {
        console.log(this);
        form.remove();
      });
    });
  });
</script>