Tengo un div HTML como este,

 <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>

Dentro de él hay un For Loop que se ejecuta cuando la página se carga por primera vez.

Debajo de este For Loop hay un botón de comentarios

 <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>

Cada vez que se hace clic en este botón de Comentarios, se llama a una función en Javascript que se define a continuación,

 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 ---> }

Lo que quiero es que cada vez que se haga clic en el botón, se vuelva a ejecutar para Loop dentro de mi div principal sin tener que actualizar la página. He estado tratando de hacer esto durante dos días, pero no pude encontrar ninguna solución a esto. ¿Alguien puede ayudarme a hacer esto?