title: Changing background colour of multiple labels in jQuery
body: <p>After answer is clicked, I am trying to change background colour: If the answer is true then only its background colour need to be changed green and if it is wrong; changing background colour of correct answer as green and selected input as red. I could make it for the first question but then it does not work for changing background of true answers in the next questions as green. 
  Here is my codes: 
  [jsfiddle]<a href="https://jsfiddle.net/zftbgoa5/1/" rel="nofollow noreferrer">https://jsfiddle.net/zftbgoa5/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   jQuery(document).ready(function(){
      jQuery('input[data-key="a"]').click(function(){
      if (jQuery(this).is(':checked')) {
        $(this).closest("label").css("background-color", "red");
        jQuery("#true").css("background-color", "green");
      }
     });
    jQuery('input').click(function(){
      if (jQuery(this).is(':checked')) {
           jQuery("#true").css("background-color", "green");
      }
   });
    jQuery('input[data-key="c"]').click(function(){
      if (jQuery(this).is(':checked')) {
      $(this).closest("label").css("background-color", "red");
      } document.getElementById("true").style.backgroundColor = "green";});
    jQuery('input[data-key="d"]').click(function(){
      if (jQuery(this).is(':checked')) {
        $(this).closest("label").css("background-color", "red");
      }
   });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;div class="questionContainer hide"&gt;
      &lt;!-- Question1--&gt;&lt;div class="question"&gt; Airbus 300-600 tipi uçağın menzili ne kadardır?
    &lt;/div&gt;
    &lt;ul class="answers"&gt;
       &lt;li&gt;&lt;label&gt;&lt;input data-key="a" type="radio"/&gt;38.2&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label id="true"&gt;&lt;input data-key="b" type="radio"/&gt;38.2&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label&gt;&lt;input data-key="c" type="radio"/&gt;38.2&lt;/label&gt;&lt;/li&gt;
       &lt;li&gt;&lt;label&gt;&lt;input data-key="d" type="radio"/&gt;29.1&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div class="questionContainer hide"&gt;
     &lt;!-- Question2--&gt;&lt;div class="question"&gt;Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?&lt;/div&gt;
     &lt;ul class="answers"&gt;
        &lt;li&gt;&lt;label id="true"&gt;&lt;input data-key="a" type="radio"/&gt;38.2&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label&gt;&lt;input data-key="b" type="radio"/&gt;34.1&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label&gt;&lt;input data-key="c" type="radio"/&gt;29.2&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label&gt;&lt;input data-key="d" type="radio"/&gt;29.1&lt;/label&gt;&lt;/li&gt;
   &lt;/ul&gt;             
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>