Update a specific row in an html table - ColdFusion - coldfusion

Question

I am outputting data from a query to an html table for representation. On the Right corner of the table I have an "Update" button and a "Delete" button.
What I am trying to do is:
When I press on the update button a modal opens. Inside that modal I have a form which I want to have predefined the values from the current row and be able to edit the specific row
When I press the delete button on a row I want that row to be deleted and reload the page
This is my html table, the last two columns on the right are the buttons
**Survey Name** **Category** **Weight** **Update** **Delete**
Consultation Ambiance 20 Update Delete
Consultation Consultation 40 Update Delete
Consultation Follow Up 40 Update Delete
This is my first query which generates the table
<cfquery name="categories" datasource="#dsn#">
select s.name, s.id as surveyid, rc.categoryname, rc.id as categoryid, sc.cweight
from survey_categories sc
join surveys s on s.id = sc.surveyidfk
join rating_categories rc on rc.id = sc.categoryidfk
where sc.surveyidfk='#form.survey#'
</cfquery>
This is the form I am accessing when I press "Update"
This form has an extra cfloop around the select tag to get the rest of the categories that I have in the database in case the user needs to change the category.
So, for example if I pressed the update button on the second row on my table this form should have Consultation in the drop down menu and the number 40 on the bottom textbox
A small note that may help, the first query that outputs the table also output a unique id with the pair (id, surveyName, Category, Weight). So the update query in the end would be something like
update categories set category='Example', weight='30'
where id='345'
I don't know how much this can help.
<cfoutput>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Update</h3>
</div>
<div class="modal-body">
<form name="update" action="updateSCpair.cfm" method="post">
<input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />
<select name="categories">
<cfloop query="ratingCat">
<option value="#ratingCat.id#" >#ratingCat.categoryName#</option>
</cfloop>
</select>
<br />
<input class="span3" type="number" placeholder="Enter Category Weight" required >
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</form>
</div>
</cfoutput>
UPDATE
TO make it more clear because I think I wrote too much. I need to call a modal on form submittion. I will need to replace my current buttons with a form and then pass all the data through hidden variables. The problem is that this is not working for me. I found another example here but it doesn't seem to work. EXAMPLE

Answer 1

I think the simplest way is to have two forms at the end of each row. You already have the buttons. The rest can be hidden fields.
Your update form would have a target attribute to launch your popup. Since you already have the values from your query, you just submit them to the popup as hidden fields.
Your delete form would submit to the current coldfusion page. At the start of the page, you would have something like this:
<cfif StructKeyExists(form, "DeleteMeOrSomethingLikeThat")>
code to delete record
</cfif>
This will get you started. If you want to improve it later on, you can.
Finally, do one thing at a time.