I have the following table:
<table>
<thead>
<tr>
<th> Lunes </th>
<th> Martes </th>
<th> Miercoles </th>
<th> Jueves </th>
<th> Viernes </th>
<th> Puntos Obtenidos </th>
</tr>
</thead>
<tbody>
<tr>
<?php for ($i=1; $i <= 5 ; $i++):?>
<td>
<select name="puntos" id="puntos" required>
<option value=""></option>
<option value='12'>Verde</option>
<option value='8'>Azul</option>
<option value='6'>Amarillo</option>
<option value='0'>Rojo</option>
<option value='-8'>Negro</option>
</select>
</td>
<?php endfor;?>
<td>
<!-- Aquí iría el código para calcular los puntos -->
</td>
</tr>
</tbody>
</table>
I need the last column " Points Earned " to show the sum of the points according to the option value selected in each cell.
I tried Jquery but it only stores the value of the first cell.
<script>
$("#puntos").change(function(){
var valor = $(this).val();
console.log(valor);
});
</script>
You can't use id to identify selects because the id has to be unique throughout the DOM. You have to use classes. In addition, the value must be initialized to 0 and add all the selected values. Something like that:
You can do it this way, although if there are multiple rows you should consider putting an id on each row so that the function selector only adds those from its row. Also, in your code you always repeat the same id and that's wrong:
Update: I modified the event so that it only adds the values of its row without the need for dynamic ids. Now each row will have an independent sum. Greetings.