title: Change background color of specific select element in a list of procedurally generated select elements
body: <p>I am trying to use jQuery to change the background color of the select element based on the option chosen within.</p>
  
  <p>To generate the select elements, I'm using the following code:</p>
  
  <pre><code>while ($qrow = $qquery-&gt;fetch(PDO::FETCH_ASSOC)) {
              $aqanswer = "qAnswer" . $qrow['questionID'] . "";
              $aqcomments = "qComments" . $qrow['questionID'] . "";
              echo "&lt;tr&gt;&lt;td class='auditf'&gt;" . $qrow['qDesc'] . "&lt;/td&gt;&lt;td class='auditm'&gt;&lt;select name='qAnswer" . $qrow['questionID'] . "' form='entryform' id = 'selectqAnswer". $qrow['questionID'] ."'&gt;";
              if (isset($_SESSION[$aqanswer])) {
                  if ($_SESSION[$aqanswer] === 'Green') {
                      echo "&lt;option value='Green' selected='true' class = 'green'&gt;Green&lt;/option&gt;";
                      echo "&lt;option value='Red' class='red'&gt;Red&lt;/option&gt;";
                  } elseif ($_SESSION[$aqanswer] === 'Red') {
                      echo "&lt;option value='Green' class ='green'&gt;Green&lt;/option&gt;";
                      echo "&lt;option value='Red' selected='true' class = 'red'&gt;Red&lt;/option&gt;";
                  }
                  unset($_SESSION[$aqanswer]);
              } else {
                  echo "&lt;option value='Green' selected='true' class = 'green'&gt;Green&lt;/option&gt;";
                  echo "&lt;option value='Red' class = 'red'&gt;Red&lt;/option&gt;";
              }
              echo "&lt;/select&gt;&lt;/td&gt;&lt;td class='auditl'&gt;&lt;textarea name='qComments" . $qrow['questionID'] . "' rows='3' cols='30' maxlength='255' value='N/A'&gt;";
              if (isset($_SESSION[$aqcomments])) {
                  echo $_SESSION[$aqcomments];
                  unset($_SESSION[$aqcomments]);
              } else {
  
              }
              echo "&lt;/textarea&gt;&lt;/td&gt;&lt;/tr&gt;";
          }
  </code></pre>
  
  <p>And my jQuery:</p>
  
  <pre><code>$("[id^=selectqAnswer]").change(function () {
      var color = $("option:selected", this).attr("class");
      $("[id^=selectqAnswer]").attr("class", color);
  });
  </code></pre>
  
  <p>Now this does work, but it causes every single box on the page to change, obviously. The problem is, the number of boxes on the page can change based on user options, so I don't have a fixed list of select IDs that I could reference individually in my jQuery. I've tried Googling the issue, but every single result talks about specifically naming the ID, not working with an ID that's generated procedurally. How do I only change a specific select element's background color based on the select option selected when I don't know what the ID will specifically be ahead of time.</p>