title: JQuery addClass to element based on selected option
body: <p><strong>How to add a class to element based on selected option</strong></p>
  
  <p>So I got this select option generated by php looping</p>
  
  <p><strong>code 1</strong></p>
  
  <pre><code>&lt;?php for ($i=1; $i &lt;= $jml_penumpang; $i++) { ?&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="penumpang_&lt;?php echo $i ?&gt;" class="control-label"&gt;Nama Penumpang &lt;?php echo $i ?&gt;&lt;/label&gt;
        &lt;input type="text" class="form-control" id="penumpang_&lt;?php echo $i ?&gt;" placeholder="Nama Penumpang &lt;?php echo $i ?&gt;" name="penumpang_&lt;?php echo $i ?&gt;" value="&lt;?php echo set_value('penumpang_'.$i); ?&gt;"&gt;
      &lt;/div&gt;
  
      &lt;label for="kode_kursi_&lt;?php echo $i ?&gt;" class="control-label"&gt;Kursi &lt;?php echo $i ?&gt;&lt;/label&gt;
      &lt;select name="kode_kursi_&lt;?php echo $i; ?&gt;" class="form-control form-group"&gt;
            &lt;option&gt;-- Pilih Kursi --&lt;/option&gt;
        &lt;?php 
          $kode_kursi = explode(",", $jml_kursi[0]-&gt;kode_kursi);
          foreach ($kode_kursi as $k) {
        ?&gt;
            &lt;option value="&lt;?php echo $k; ?&gt;"&gt;&lt;?php echo $k; ?&gt;&lt;/option&gt;
        &lt;?php
          }
        ?&gt;
      &lt;/select&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>now I want to add some css to below element that also generated by php looping</p>
  
  <p><strong>code 2</strong></p>
  
  <pre><code>&lt;div class="col-xs-5 col-xs-offset-1"&gt;  
    &lt;p class="text-center page-header"&gt;&lt;strong&gt;&lt;i class="fa fa-users"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Denah Tempat Duduk&lt;/strong&gt;&lt;/p&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;&lt;div class="well text-center"&gt;Depan&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;?php 
        $kode_kursi = explode(",", $jml_kursi[0]-&gt;kode_kursi);
        foreach ($kode_kursi as $k) {
      ?&gt;
          &lt;div class='col-xs-6'&gt;&lt;div class='well text-center'&gt;&lt;i class='fa fa-user'&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;?php echo $k ?&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;?php
        }
      ?&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;&lt;div class="well text-center"&gt;Belakang&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to add inline css style to this element (from <strong>code 2</strong>)</p>
  
  <pre><code>&lt;div class='well text-center'&gt;
  </code></pre>
  
  <p>Based on selected option value from <strong>code 1</strong> </p>
  
  <p><strong>So the logic is like:</strong></p>
  
  <p>I want to add inline css style (style="background:yellow") to the element in <strong>code 2</strong> that has a text equals to selected option value on <strong>code 1</strong></p>
  
  <p>How to that using JQuery?</p>
  
  <p>Thank you so much</p>
  
  <p>and sorry for my grammar</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>this is the generated select option from <strong>code 1</strong> ( NOTE: i don't include the )</p>
  
  <pre><code>&lt;select name="kode_kursi_1" class="form-control form-group"&gt;
    &lt;option&gt;-- Pilih Kursi --&lt;/option&gt;
    &lt;option value="T003-1"&gt;T003-1&lt;/option&gt;
    &lt;option value="T003-2"&gt;T003-2&lt;/option&gt;
    &lt;option value="T003-3"&gt;T003-3&lt;/option&gt;
    &lt;option value="T003-4"&gt;T003-4&lt;/option&gt;
    &lt;option value="T003-5"&gt;T003-5&lt;/option&gt;
    &lt;option value="T003-6"&gt;T003-6&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="kode_kursi_2" class="form-control form-group"&gt;
    &lt;option&gt;-- Pilih Kursi --&lt;/option&gt;
    &lt;option value="T003-1"&gt;T003-1&lt;/option&gt;
    &lt;option value="T003-2"&gt;T003-2&lt;/option&gt;
    &lt;option value="T003-3"&gt;T003-3&lt;/option&gt;
    &lt;option value="T003-4"&gt;T003-4&lt;/option&gt;
    &lt;option value="T003-5"&gt;T003-5&lt;/option&gt;
    &lt;option value="T003-6"&gt;T003-6&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and this is the generated element from <strong>code 2</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-1"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-1&lt;/div&gt;&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-2"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-2&lt;/div&gt;&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-3"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-3&lt;/div&gt;&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-4"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-4&lt;/div&gt;&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-5"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-5&lt;/div&gt;&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;&lt;div class="well text-center" id="T003-6"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;T003-6&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I Also get rid the <code>&amp;nbsp;</code> to be more readable</p>