OnClick event for button only works on first row of table

Question

I am using Google Maps Geocoding to search and display an address from row of a table on my JSP page. The address is retrieved from a Session Key. Each row has an address and a button, but currently the button only works with the address in the first row. I am new to this, so apologies if the terminology is incorrect.

Session Key code:

<tbody>
<c:forEach items="${SKALLUSERS}" var="tempuser">    
    <tr>
        <td scope="row"><c:out value="${tempuser.getId()}"/></td>
            <td>${tempuser.id}</td>
            <td>${tempuser.email}</td>
            <td>${tempuser.password}</td>
            <td>${tempuser.firstName}</td>
            <td>${tempuser.lastName}</td>
            <td>${tempuser.userType}</td>
            <td><input id="address" type="textbox" 
            value="${tempuser.address}"></td>
            <td><a href="updateUser.jsp">Update</a></td>
            <td><input id="submit" type="button" value="Geocode"></td>
    </tr>
</c:forEach>
</tbody>

Google Maps Geocoding

<div id="floating-panel"></div>
<div id="map"></div>

<script>
    function initMap() {
    var map = new google.maps.Map
    (
        document.getElementById('map'), 
        {
            zoom: 8,
            center: {lat: -34.397, lng: 150.644}
        }
   );
   var geocoder = new google.maps.Geocoder();

   document.getElementById('submit').addEventListener
   (
       'click', function() 
       {
          geocodeAddress(geocoder, map);
       }
   );
  }

  function geocodeAddress(geocoder, resultsMap) 
  {
      var address = document.getElementById('address').value;
      geocoder.geocode({'address': address}, function(results, status) 
      {
      if (status === 'OK') 
      {
          resultsMap.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker
          ({
              map: resultsMap,
              position: results[0].geometry.location
          });
      }
      else 
      {
          alert('Geocode was not successful for the following reason: + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCH2nCSs1XR37Q6HdyUpZZfgP5_uMsi-vA&callback=initMap">
</script>

Answer 1

By no means an expert and I might be wrong, but as far as I know ids should be unique.

Try adding a class to your submit button or an index to the id, something like "submit1", "submit2" and then use: the addEventListener you have

document.getElementById('submit').addEventListener

But using another some other selector, like getElementsByClassName or using the current one if you add the index but getting all the elements whose id start with "submit".

Answer 2

By no means an expert and I might be wrong too.

But chances are if only the button in the first row of the table within the forEach loop works as you have stated, then the rest should work too.

Except maybe the data (i.e. items="${SKALLUSERS}") you're looping through is somehow incorrect, such that first item which results in the first row of the table is the only one with the expected values, while the rest isn't.