Javascript Django like button doesn't update counter

I have created Put request to update like count, but when I press like button count doesn't change unless I refresh page. and like/unlike function works fine. Can somebody help me resolve this issue?

view.py Here is how i have done put request.

class PostLikeView(APIView):
    
    authentication_classes = [SessionAuthentication]
    permission_classes = [IsAuthenticated]

    def get(self, request, post_id, slug=None, format=None):
        post = Post.objects.get(pk=post_id)
        serializer = PostSerializer(post, many=False, )
        return JsonResponse(serializer.data, safe=False)

    def put(self, request, post_id, slug=None, format=None):
        post = Post.objects.get(pk=post_id)
        user = self.request.user
        # if user.is_authenticated():
        if user in post.likes.all():
                post.likes.remove(user.id)
        else:
            post.likes.add(user.id)
        serializer = PostSerializer(post, data=request.data)
        if serializer.is_valid():
            serializer.save()
        return JsonResponse(serializer.data, safe=False)

In javascript at like_button.addEventListener i calling function like post where i pass post_id this function works except counter doesnt change unless i refresh page, can I edit so counter update without refreshing if not how to setup automatically to refresh after put request complete? index.js

function post_list(post) {
    const postdiv = document.createElement('div')
    postdiv.setAttribute('id','post-div')

    const userdiv = document.createElement('div')
    userdiv.setAttribute('id', 'username-div')

    const bodydiv = document.createElement('div')
    bodydiv.setAttribute('id', 'body-div')


    const datediv = document.createElement('div')
    datediv.setAttribute('id', 'date-div')



    const datep = document.createElement('p')
    datep.setAttribute('id', 'date-paragraph')

    const userp = document.createElement('p')
    userp.setAttribute('id', 'username-paragraph')

    const bodyp = document.createElement('p')
    bodyp.setAttribute('id', 'body-paragraph')
    
    // LIKE 
    const likesdiv = document.createElement('div')
    likesdiv.setAttribute('id', 'likes-div')

    let likesp = document.createElement('p')
    likesp.setAttribute('id', 'likes-paragraph')

    // LIKE BUTTON
    let like_button = document.createElement('button')
    like_button.setAttribute('id', 'like-button')
    
    const post_id = post.id
    let user_id = document.querySelector("#user-id").value;
    let likes = post.likes

    const postp = document.createElement('p')
    postp.innerHTML = post_id

    //  LIKE COUNTER
    let likes_counter = post.likes.length
    console.log(likes_counter)
    likesp.innerHTML = `Likes: ${likes_counter}`

    
    if (likes.indexOf(parseInt(user_id)) >= 0) {
        like_button.innerHTML = 'Unlike'
    } else {
        like_button.innerHTML = 'Like'  
    }
    
    like_button.setAttribute('type', 'submit')
   
    like_button.addEventListener('click', () => {
        if(like_button.innerText.toLowerCase() === 'like') {
            like_button.innerText = 'Unlike';
            
          }
          else {
            like_button.innerText = 'Like';
            
          }
        like_post(post_id, post.likes);
        
    })
    
    
    datep.innerHTML = post.date
    datediv.append(datep)

    userp.innerHTML = post.user
    userdiv.append(userp)

    bodyp.innerHTML = post.post
    bodydiv.append(bodyp)
    
    likesdiv.append(likesp, like_button)

    postdiv.append(bodydiv, userdiv, likesdiv, datediv, )
    document.querySelector('#post-list').append(postdiv)
}

function like_post(post_id) {
    
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');
    let user = document.querySelector('#user-id').value;
    fetch(`/posts/${post_id}`, {
        method: 'PUT',
        headers: {
            "X-CSRFToken":  csrftoken ,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            user: user,
            id: post_id,
        })
    })
    .then(response => response.json())
    .then(result => {
        // Print result
        console.log(result);     
    })
}

 //  LIKE COUNTER
    let likes_counter = post.likes.length
    likesp.innerHTML = `Likes: ${likes_counter}`


    if (document.querySelector("#user-id") != null) {
        
        let user_id = document.querySelector("#user-id").value;
        // LIKE BUTTON
        let like_button = document.createElement('button')
        like_button.setAttribute('id', 'like-button')

        if (post.likes.indexOf(parseInt(user_id)) >= 0) {
            like_button.innerHTML = 'Unlike'
        } else {
            like_button.innerHTML = 'Like'  
        }
        
        like_button.setAttribute('type', 'submit')
       
        like_button.addEventListener('click', () => {
            
            if(like_button.innerText.toLowerCase() === 'like') {
                like_button.innerText = 'Unlike';
                likes_counter ++    
              }
              else {
                like_button.innerText = 'Like';
                likes_counter -- 
              }
              likesp.innerHTML = `Likes: ${likes_counter}`
            like_post(post_id, post.likes);  
        })
        likesdiv.append(like_button)
    }