How to save down Django user's updated social media post?

Goal

• A user can edit the post that that specific user made. Bly clicking edit than editing than pressing save.

Problem

• When I edit the social media post it does not get saved

Description

• I can make a mew post like in social media
• Post it in to a list where all the other users post (shortened 200 character visible only)
• Than I can click on a "Details button" that jumps me to another page where I can see the full length of the post
• There is a button here called "edit" it should only appear to the post creator
• If you click edit than a window pop up where you already have your existing post copied in to an inout field
• here you can edit your post
• the goal would be it you click save it should save it down but that does not happens
• Interestingly if i close down the pop up windows with the small window [X] button or the "cancel" button and I go back it memorizes my edit there

View function

@login_required
def social_post_detail(request, pk):
    social_post = get_object_or_404(social_post, pk=pk)
    form = None
    if request.user == social_post.created_by:
        if request.method == 'POST':
            print(request.POST)
            form = social_postForm(request.POST, instance=social_post)
            if form.is_valid():
                form.save()
                return redirect('social_post_list')
        else:
            form = social_postForm(instance=social_post)
    return render(request, 'social_post_detail.html', {'social_post': social_post, 'form': form})


### new edit
from django.shortcuts import render, redirect
from .models import social_post
from .forms import social_postForm

def social_post_edit(request, pk):
    social_post = social_post.objects.get(pk=pk)
    if request.method == 'POST':
        form = social_postForm(request.POST, instance=social_post)
        if form.is_valid():
            form.save()
            return redirect('social_post_detail', pk=social_post.pk)
    else:
        form = social_postForm(instance=social_post)
    return render(request, 'social_post/social_post_edit.html', {'form': form})

View function unified 1 functions insted of 2

I have tried it 1by one but non of them worked

########## ALL IN 1 FUNCTION #1 ##########
@login_required
def social_post_detail(request, pk):
    social_post = get_object_or_404(social_post, pk=pk)
    if request.user != social_post.created_by:
        return redirect('social_post_list')

    if request.method == 'POST':
        form = social_postForm(request.POST, instance=social_post)
        if form.is_valid():
            form.save()
            return redirect('social_post_list')
    else:
        form = social_postForm(instance=social_post)

    return render(request, 'social_post_detail.html', {'social_post': social_post, 'form': form})

######### ALL IN 1 FUNCTION #2 ########## 2023.02.01
@login_required
def social_post_detail(request, id):
    social_post = get_object_or_404(social_post, id=id)
    social_post = social_post.objects.get(pk=pk)
    if request.method == "POST":
        form = social_postForm(request.POST, instance=social_post)
        if form.is_valid():
            form.save()
            return redirect('social_post_list')
    else:
        form = social_postForm(instance=social_post)
    return render(request, 'social_post/social_post_detail.html', {'social_post': social_post, 'form': form})

HTML

social_post.html details

{% extends 'base.html' %}

{% block content %}
  <h1>{{ social_post.title }}</h1>
  <p>{{ social_post.description }}</p>
  <a href="{% url 'social_post_list' %}" class="btn btn-primary">Back to social_post List</a>
  <button type="button" class="btn btn-primary" id="editsocial_postButton">Edit social_post</button>
  
  <script>
    document.getElementById("editsocial_postButton").addEventListener("click", function() {
      $('#editModal').modal('show');
    });
  </script>
  
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit social_post</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="post">
            {% csrf_token %}
            <div class="form-group">
              <label for="title">social_post Title</label>
              <input type="text" class="form-control" name="title" value="{{ social_post.title }}">
            </div>
            <div class="form-group">
              <label for="description">social_post Description</label>
              <textarea class="form-control" name="description">{{ social_post.description }}</textarea>
            </div>
            {{ form.as_p }}
            <button type="submit" class="btn btn-primary">Save Changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  
{% endblock %}

No ERROR message

• I get no error message
• Just the following terminal print out after I press the save button

[02/Feb/2023 00:43:52] "GET /social_post/social_post/1/ HTTP/1.1" 200 7142
[02/Feb/2023 00:44:13] "POST /social_post/social_post/1/ HTTP/1.1" 200 7142

My guesses

• I am struggling with the JS and CSS imports they might cause the error.

if form.is_valid():
    form.save()
else:
   print(form.errors)

from django.contrib import messages
if form.is_valid():
    #...
else:
    messages.error(request, messages.INFO, str(form.errors))
    return redirect('social_post_detail', pk=social_post.pk)