adding a block of matrix field from a front end entry form

Question

I am trying to add a form to the frontend in which a registered user will be able to create and publish new block in a matrix field. I have read the documentation about it but am still failing miserably in achieving it...

The entry is part of a structure section with sectionId movementCoursesEntries. The matrix fieldId is videos. The blockId is video_box and it has two plain text fields videoTitle and videoUrl.

I have used this code but what I am getting is that the after submitting the form, all the old matrix blocks are being deleted and the new one is not being created. Any advice is highly appreciated!

<form method="post" accept-charset="UTF-8">
    {{ csrfInput() }}
    {{ actionInput('entries/save-entry') }}
    {{ redirectInput('/members-zone/{slug}') }}
    {{ hiddenInput('movementCoursesEntries', '2') }}
    {{ hiddenInput('enabled', '1') }}
    {{ hiddenInput('entryId', entry.id) }}
  
    {% if entry is defined %}
        {# Retain existing blocks + sort order #}
        {% for video_box in clone(entry.videos).anyStatus().ids() %}
            {{ hiddenInput('fields[videoTitle][sortOrder][]', video_box) }}
            {{ hiddenInput('fields[videoUrl][sortOrder][]', video_box) }}
        {% endfor %}
    {% endif %}

    {# Add a new text block #}
    {{ hiddenInput('fields[videoTitle][sortOrder][]', 'new:1') }}
    {{ hiddenInput('fields[videoUrl][sortOrder][]', 'new:1') }}

    {# Prefix the block's input names with `fields[<FieldHandle>][blocks][new:1]` #}
    {% namespace "fields[blocks][blocks][new:1]" %}
        {{ hiddenInput('type', 'text') }}
        <input name="fields[videoTitle]">
        <input name="fields[videoUrl]">
    {% endnamespace %}

  <input type="submit" value="Publish">
</form>

Answer 1

With the help of CreateSean comment I have managed to fix the problems in the form.

Here it is for future reference for everyone:

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data" class="edit-store">
    {{ csrfInput() }}
    {{ actionInput('entries/save-entry') }}
    {{ redirectInput('members-zone/{slug}') }}
    {{ hiddenInput('movementCoursesEntries', '2') }}
    {{ hiddenInput('enabled', '1') }}
    <input type="hidden" name="entryId" value="{{ entry.id }}">

    {# various includes here #}
    <input type="hidden" name="fields[blocks]" />

    {% for block in entry.videos %}
        {% if block.type == 'video_box' %}
            <div class="matrixblock ">
                <input type="hidden" name="fields[videos][{{ block.id }}][type]" value="video_box">
                <input type="hidden" name="fields[videos][{{ block.id }}][enabled]" value="1">
                <input type="hidden" name="fields[videos][{{ block.id }}][fields][videoTitle]" value="{{ block.videoTitle }}">
                <input type="hidden" name="fields[videos][{{ block.id }}][fields][videoUrl]" value="{{ block.videoUrl }}">
            </div>
        {% endif %}
    {% endfor %}
    {# hidden field with block type that is being updated #}
    <input type="hidden" name="fields[videos][new_0][type]" value="video_box">
    {# is this block enabled #}
    <input type="hidden" name="fields[videos][new_0][enabled]" value="1">
    <input type="text" name="fields[videos][new_0][fields][videoTitle]" value="" placeholder="Video Title">
    <input type="text" name="fields[videos][new_0][fields][videoUrl]" value=""  placeholder="Videl URL">
    
    <input type="submit" value="Save" class="btn btn-primary">
</form>