jquery - Add javascript onclick message to php dynamic list -

i have dynamically-generated list of plants have gotten mysql query. in each row of resulting list, have select dropdown list of plant sizes allow users change size of each plant.

i warn user upon clicking on dropdown list need click submit button update when change size given plant. current javascript have plugged in displays correct message in first row of results, no matter row click select dropdown in.

here code works , appear first row of list. realize old syntax, see diverse information out there, i'm having hard time sorting out do. better @ php javascript.

$(document).ready(function() {  $(".plantsize").click(function() {      $("#recalc").css({ color:"red" }).html("click button update after making changes.").width(400);  });});    echo '<td>              <select class="plantsize" name="size_' . $row_count . '" value="' . $size . '">                   <option value=".5"' . ($size == .5 ? ' selected="selected"' : '') . '>.5 feet</option>                   <option value="1"' . ($size == 1 ? ' selected="selected"' : '') . '>1 foot</option>                   <option value="2"' . ($size == 2 ? ' selected="selected"' : '') . '>2 feet</option>                   <option value="3"' . ($size == 3 ? ' selected="selected"' : '') . '>3 feet</option>                   <option value="4"' . ($size == 4 ? ' selected="selected"' : '') . '>4 feet</option>                   <option value="5"' . ($size == 5 ? ' selected="selected"' : '') . '>5 feet</option>                   <option value="6"' . ($size == 6 ? ' selected="selected"' : '') . '>6 feet</option>                   <option value="7"' . ($size == 7 ? ' selected="selected"' : '') . '>7 feet</option>                   <option value="8"' . ($size == 8 ? ' selected="selected"' : '') . '>8 feet</option>                   <option value="9"' . ($size == 9 ? ' selected="selected"' : '') . '>9 feet</option>                   <option value="10"' . ($size == 10 ? ' selected="selected"' : '') . '>10 feet</option>             </select>     </td>      <td>';                $peak_water = $peak_et * $etaf * 0.7854 * 1 * .623;               echo number_format($peak_water,1) . ' gal./wk.</td>';      </td>      <td><input type="submit" name="submit" value="calculate" />                 <span class="recalcwarning" id="recalc"></span>     </td>      </tr>';  

the id field supposed unique entire document. not on each row. jquery matching of #recalc id in whole table, applying html text first matched #recalc 1 in first row. here couple of ways fix it.

1) if can't modifiy id, recalc id in row of click.

$(".plantsize").click(function() {      //finds closest tr up-dom of clicked object, finds span id recalc within tr.     var span = $(this).closest("tr").find("span#recalc");      span.css({ color:"red" }).html("click button update after making changes.").width(400);  }); 

2) really, shouldn't use id field this. id's meant unique. instead, use class name employ above code again, modified selector.

<span class="recalcwarning"></span>  $(".plantsize").click(function() {      //finds closest tr up-dom  of clicked object, finds span class recalcwarning within tr.     var span = $(this).closest("tr").find("span.recalcwarning");      span.css({ color:"red" }).html("click button update after making changes.").width(400);  }); 

update

on further review, did notice potential invalid html issue. in line echo number_format($peak_water,1) . ' gal./wk.</td>' see td tag ended there, on next line, have end td tag.

here link workin jsfiddle example based on sample code. http://jsfiddle.net/7v90kj9p/