Using GeoLocation variables in CFSET - coldfusion

Question

I'm trying to capture geolocation data and insert it into a database.
The code below is my attempt to capture the browser's longitude and latitude and save the values in two form fields. The problem is the output code generates multiple instances of the two form fields (i.e. "longitude" and "longitude"). Here's a screen shot of a single set of those fields being populated. How do I populate the rest?
Form Code:
<div class="table-responsive">
<table class="table table-1" style="color:##000000">
<tr>
<td>Tree No</td>
<td>Current Status</td>
<td>Graft Successful</td>
<td>NOT Grafted</td>
<td>Graft unsuccessful</td>
<td>Tree Died</td>
</tr>
<cfoutput query="rsTreeList" >
<tr>
<td>#TreeID#</td>
<td>#Status#</td>
<td>
<form name="form1" method="post" action="Recon_Update_Logic1.cfm?ID=#TreeID#">
<img src="images/Icons/Success.jpg" width="25" height="25" alt=""/>
<input id="latitude" name="latitude" type="text" />
<input id="longitude" name="longitude" type="hidden" />
<input name="submit" type="submit" id="Submit" value="Graft Successful">
</form>
</td>
<td>
<form name="form1" method="post" action="Recon_Update_Logic2.cfm?ID=#TreeID#">
<img src="images/Icons/NotGrafted.jpg" width="25" height="25" alt=""/>
<input id="latitude" name="latitude" type="text" />
<input id="longitude" name="longitude" type="hidden" />
<input name="submit" type="submit" id="Submit" value="NOT Grafted">
</form>
</td>
<td>
<form name="form1" method="post" action="Recon_Update_Logic3.cfm?ID=#TreeID#">
<img src="images/Icons/GraftUnsuccessful.jpg" width="25" height="25" alt=""/>
<input id="latitude" name="latitude" type="hidden" />
<input id="longitude" name="longitude" type="hidden" />
<input name="submit" type="submit" id="Submit" value="Graft Unsuccessful">
</form>
</td>
<td>
<form name="form1" method="post" action="Recon_Update_Logic4.cfm?ID=#TreeID#">
<img src="images/Icons/TreeDead.jpg" width="25" height="25" alt=""/>
<input id="latitude" name="latitude" type="hidden" />
<input id="longitude" name="longitude" type="hidden" />
<input name="submit" type="submit" id="Submit" value="Tree Dead">
</form>
</td>
</tr>
</cfoutput>
</table>
</div>
The following code attempts to populate all of the "latitude" and "longitude" elements:
<cfloop index="i" from="1" to="#rsTreeList.recordCount#">
<script>
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position)
{
document.getElementById("latitude").value = position.coords.latitude;
document.getElementByID("longitude").value = position.coords.longitude;
}
getLocation();
</script>
</cfloop>