Can you render jsp/html elements (i.e. a form:form) dynamically in one page? - spring

Question

I am new to web-dev, and coding in general, so I apologize if this question doesn't make sense.
Background: I am working on a web application utilizing the Spring Framework. My application allows users to register a user account, post pictures, make comments on pictures, like pictures etc. (think of a mini Pintrest clone). Users and comments (along with some other non-relevant entities) are all saved as in table entities in a MySQL database.
Problem: I would like users be able to edit their comments after they post them. For the best user experience I do not want users to be taken to a separate page with a form to edit their comment. I would like user to be able to edit their comment in a single page/the same page, without rendering a new one. Flow goes something like this: User goes to their comment on a picture, presses an "edit" button/link and the comment is put in a text box (form:form) which is then editable.
So far I have tried conditional rendering with a boolean switch of "editPressed" but I can't seem to work out the logic. Is this the correct approach or should something like JS be used here? (not sure how js handles form:forms) Below are some code snippets of the models and the .jsp where the comment would be edited.
.jsp:
<c:forEach var="eachComment" items="${allCommentsByPhotoId}">
<div class="card-text d-flex gap-2 mb-4">
<img class="user-comment-card" src="https://cdn-icons-png.flaticon.com/512/1053/1053244.png" alt="" />
<div>
<div class="mb-2">
<c:choose>
<c:when test="${ editPressed == false }">
<c:out value="${eachComment.user.getFirstName()} says: ${ eachComment.getComment() }"></c:out>
</c:when>
<c:otherwise>
<span class="username">
<c:out value="${eachComment.user.getFirstName()}"></c:out>:
</span>
<c:out value="${ eachComment.getComment()}"></c:out>
</c:otherwise>
</c:choose>
</div>
<div class="d-flex align-items-center gap-3">
<!-- -->
<c:if test="${ eachComment.user.getId() == currentUser.id }">
<form:form action="/delete/${eachComment.getId()}" method="delete">
<p class="submit">
<input class="btn btn-danger del-cmt-btn" type="submit" value="Delete" />
</p>
</form:form>
<form:form action="/edit/comment/${eachComment.getId()}">
<p class="submit">
<input class="btn btn-secondary edit-cmt-btn" type="submit" value="Edit" />
</p>
</form:form>
</c:if>
</div>
</div>
</div>
</c:forEach>
Comment Model:
#Entity
#Table(name="user_comments_on_photo")
public class Comment {
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String comment;
#ManyToOne(fetch = FetchType.LAZY)
#JoinColumn(name="user_id")
private User user;
#ManyToOne(fetch = FetchType.LAZY)
#JoinColumn(name="photo_id")
private Photo photo;
#ManyToMany(fetch=FetchType.LAZY)
#JoinTable(
name="user_likes_comment",
joinColumns = #JoinColumn(name="comment_id"),
inverseJoinColumns = #JoinColumn(name="user_id")
)
private List<User> usersWhoLikeComment;
#Column(updatable=false)
#DateTimeFormat(pattern="yyyy-MM-dd")
private Date createdAt;
#DateTimeFormat(pattern="yyyy-MM-dd")
private Date updatedAt;
USER MODEL:
#Id
#GeneratedValue(strategy=GenerationType.IDENTITY)
private Long id;
#Size(min=3)
private String firstName;
#Size(min=3)
private String lastName;
#Email
private String email;
#Size(min=8)
private String password;
#Transient
private String passwordConfirmation;
#Column(updatable=false)
private Date createdAt;
private Date updatedAt;
//RELATIONSHIPS
#OneToMany(mappedBy="user", fetch = FetchType.LAZY)
private List<Photo> photos;
#ManyToMany(fetch = FetchType.LAZY)
#JoinTable(
name = "user_likes_photo",
joinColumns = #JoinColumn(name="user_id"),
inverseJoinColumns = #JoinColumn(name="photo_id")
)
private List<Photo> likedPhotos;
//NEW ONE-TO-MANY
#OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
private List<Comment> userComments;
#ManyToMany(fetch=FetchType.LAZY)
#JoinTable(
name="user_likes_comment",
joinColumns = #JoinColumn(name="user_id"),
inverseJoinColumns = #JoinColumn(name="comment_id")
)
private List<Comment> commentsUserLikes;
#ManyToMany(fetch = FetchType.EAGER)
#JoinTable(
name = "users_roles",
joinColumns = #JoinColumn(name = "user_id"),
inverseJoinColumns = #JoinColumn(name = "role_id"))
private List<Role> roles;
PHOTO MODEL:
#Entity
#Table(name="photos")
public class Photo {
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String photoURL;
private String photoFileName;
#NotEmpty
private String photoTitle;
#NotEmpty
private String photoDescription;
//will add tags later
//RELATIONSHIPS
#ManyToOne(fetch = FetchType.LAZY)
#JoinColumn(name="user_id")
private User user;
#ManyToMany(fetch=FetchType.LAZY)
#JoinTable(
name="user_likes_photo",
joinColumns = #JoinColumn(name="photo_id"),
inverseJoinColumns = #JoinColumn(name="user_id")
)
private List<User> usersWhoLikePhoto;
//NEW ONE-TO-MANY
#OneToMany(mappedBy="photo", fetch = FetchType.LAZY)
private List<Comment> comments;
//CREATED AND UPDATED AT
#Column(updatable=false)
#DateTimeFormat(pattern="yyyy-MM-dd")
private Date createdAt;
#DateTimeFormat(pattern="yyyy-MM-dd")
private Date updatedAt;