Tagging using JS using Partials

lostplaces/lostplaces_app/templates/partials/tagging.html

@@ -0,0 +1,53 @@
+<div class="LP-TagList">
+    <ul class="LP-TagList__List">
+        {% for tag in tag_list %}
+        <li class="LP-TagList__Item">
+            <div class="LP-Tag">
+                <p class="LP-Paragraph">{{tag}}</p>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
+
+<form id="id_tag_submit_form" class="LP-Form LP-Form--inline" method="POST" action="{{url}}">
+    <fieldset class="LP-Form__Fieldset">
+        <legend class="LP-Form__Legend">Tags hinzufügen</legend>
+        {% csrf_token %}
+        <div class="LP-Form__Composition LP-Form__Composition--breakable">
+            <div class="LP-Form__Field">
+                {% include 'partials/form/inputField.html' with field=input_field %}
+            </div>
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
+                <button id="id_tag_submit_button" class="LP-Button">hinzufügen</button>
+            </div>
+        </div>
+    </fieldset>
+</form>
+
+<script>
+    const input = document.getElementById('{{input_field.auto_id}}')
+    const submit_form = document.getElementById('id_tag_submit_form')
+    const submit_button = document.getElementById('id_tag_submit_button')
+
+    submit_form.onsubmit = () => false
+
+    const tagify = new Tagify(input, {
+		'whitelist': [
+		{% for tag in all_tags %}
+			'{{tag}}',
+		{% endfor %}
+		]
+    })
+
+    const on_form_submit = function() {
+        concat_value = ''
+        console.log(tagify)
+        concat_value = tagify.value.map(value => value.value).join(',')
+        console.log(concat_value)
+        input.value = concat_value
+        submit_form.submit()
+    }
+
+    submit_button.onclick = on_form_submit
+</script>