Saving tags via front end entry form - craft cms 4 and selectize.js

Question

I have a front end entry form that allows users to update their entry. I have created a tag field using selectize.js that displays the existing tags for that entry, allows the user to enter their own tags and suggests tags to them as they type. However, I have no idea how to go about the following:

• Limit the number of tags that can be added to 5
• Ensure that the suggested tags are only from a particular tag group
• Update the entry with the new tag list when the form is submitted

Here is my code:

{# Require that a user is logged in to view this form. #}
{% requireLogin %}

{% macro errorList(errors) %}
  {% if errors %}
    {{ ul(errors, {class: 'errors'}) }}
  {% endif %}
{% endmacro %}


{% set currentEntryId = craft.app.request.getParam('id') %}


{% set entryQuery = craft.entries().id(currentEntryId) %}

{% set entry = entryQuery.one() %}

{% set authorId = currentUser.id %}

<div class="intro-section posts-intro wf-section">
<div class="div-block-14">

<h1 class="grid-heading">{{ entry.title }}</h1>
<div class="request-a-listing-form-wrapper account-access-form-wrapper">

{% if entry.authorId == authorId %}



<form id="update-entry-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data">

{{ csrfInput() }}
{{ actionInput('entries/save-entry') }}
{{ redirectInput('artists/{slug}') }}
{{ hiddenInput('enabled', '8') }}
{{ hiddenInput('entryId', currentEntryId) }}



<div class="form-item-wrapper">
  <label for="title" class="field-label">Name*</label>

    {{ input('text', 'title', entry.title, {
      id: 'title',
      type: 'text',
      class:'form-field account-access-form-field w-input',
      maxlength: '256',
      name: 'name',
      required: true,

    }) }}
    {{ _self.errorList(entry.getErrors('title')) }}

  </div>

<div class="form-item-wrapper">
  <label for="websiteUrl" class="field-label">Website URL</label>

    {{ input('text', 'fields[websiteUrl]', entry.websiteUrl, {
      id: 'websiteUrl',
      type: 'text',
      class:'form-field account-access-form-field w-input',
      name: 'websiteUrl',
      required: false,

    }) }}
    {{ _self.errorList(entry.getErrors('websiteUrl')) }}

  </div>


  <div class="form-item-wrapper">
      <label for="shopUrl" class="field-label">Shop URL</label>

        {{ input('text', 'fields[shopUrl]', entry.shopUrl, {
          id: 'shopUrl',
          type: 'text',
          class:'form-field account-access-form-field w-input',
          name: 'shopUrl',
          required: false,
    
        }) }}
        {{ _self.errorList(entry.getErrors('shopUrl')) }}

      </div>
<div class="form-item-wrapper">
  <label for="townCity" class="field-label">Town / City</label>

    {{ input('text', 'fields[townCity]', entry.townCity, {
      id: 'townCity',
      type: 'text',
      class:'form-field account-access-form-field w-input',
      name: 'townCity',
      required: false,

    }) }}
    {{ _self.errorList(entry.getErrors('townCity')) }}

  </div>


<div class="form-item-wrapper">
  <label for="briefDescription" class="field-label">Brief Bio</label>

    {{ input('text', 'fields[briefDescription]', entry.briefDescription, {
      id: 'townCity',
      type: 'text',
      class:'form-field account-access-form-field w-input',
      name: 'briefDescription',
      required: true,

    }) }}
    {{ _self.errorList(entry.getErrors('briefDescription')) }}

  </div>


<div class="tags-container" >
<label for="input-tags" class="field-label">Tags</label>
<input name="fields[artistTagField][]" style="max-width: 400px;" type="text" id="input-tags" value="
{% for tagItem in entry.artistTagField %}
    {{ tagItem }}
    {% endfor %}
" />
</div>



<div class="mb-6">
  <button style="margin-top: 40px;" type="submit" class="submit-button w-button">Publish</button>
</div>

</form>

<script>
  
$("#input-tags").selectize({
  delimiter: ",",
  persist: false,
  create: function (input) {
    return {
        value: input,
        text: input,
    };
  },
});

</script>


{% else %}

<h3>You do not have permission to edit this listing</h3>

{% endif %}

</div>
</div>
</div>