I have a HTML div like this,

<div  class="coment-area ">
            
            <ul class="we-comet">
              {% for j in comment %}
              <div  id="delete_comment{{j.id}}" class="mt-3">
                {% if j.post_id.id == i.id %}
                
                <li >
               
                      <div class="comet-avatar">
                        {% if j.user_id.User_Image %}
                          <img class="card-img-top" style=" vertical-align: middle;width: 50px;height: 50px;border-radius: 50%;" src= {{ j.user_id.User_Image.url }} alt="">
                        {% else %}
                       <img class="card-img-top" style=" vertical-align: middle;width: 60px;height: 60px;border-radius: 50%;" src="static\images\resources\no-profile.jpg">
                       {% endif %}
                      </div>

Inside of it is a For Loop that is executed when the page is first loaded.

Below this For Loop is a Comments Button

    <div >
                                <button type="submit" onclick="comment_save(event,{{i.id}})"  class= "my-2 ml-2 px-2 py-1 btn-info  active hover:bg-gray-400 rounded ">Comment</button>
                            </div>
                            
                        </div>    
                    </li>
                </ul>
            </div>

Whenever this button of Comments is clicked, a function in Javascript is called which is defined below,

function comment_save(event,post_id)
            
            {   
                var comment_value=$("#comment_value"+post_id).val();    
                

                var user_id=$("#comment_user_id"+post_id).val()
                
                postdata={
                    "comment_value":comment_value,
                    "user_id":user_id,
                    "post_id":post_id
                }
                SendDataToServer("readmore",postdata,function()
                {
                    alert()
                }) 
                
                $("#comment_value"+post_id).val(" ")
                <! --- document.location.reload().. Something here that refresh that for loop --->
                
                
                
            }

What I want is this that whenever the button is clicked, it re-executes that for Loop inside my main div without having to refresh the page. I have been trying to do this for two days but could not find any solution to this. Can anyone help me in doing this?