title: How to create a custom dropdown to change the content
body: <p>I have a custom dropdown and</p>
  <pre><code>&lt;div class=&quot;title__area&quot;&gt;
                      &lt;div class=&quot;custom-select payment__method&quot;&gt;
                        &lt;select&gt;
                          &lt;option value=&quot;0&quot;&gt;ÖDEME TİPİ&lt;/option&gt;
                          &lt;option value=&quot;1&quot; class=&quot;transfer-selected&quot;&gt;Havale - EFT&lt;/option&gt;
                          &lt;option value=&quot;2&quot; class=&quot;credit-card-selected&quot;&gt;Kredi Kartı&lt;/option&gt;
                        &lt;/select&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;row&quot; id=&quot;credit-card-selected&quot;&gt;
                     
                    &lt;/div&gt;
                    &lt;div class=&quot;row&quot; id=&quot;transfer-selected&quot;&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>And what I am trying to achieve, so if the user selects value 1 which is transfer-selected in this case, I want to show this:</p>
  <pre><code>&lt;div class=&quot;row&quot; id=&quot;transfer-selected&quot;&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>And if the user selects value 2 which is credit-card-selected in this case, I want to show this:</p>
  <pre><code>&lt;div class=&quot;row&quot; id=&quot;credit-card-selected&quot;&gt;
  
                    &lt;/div&gt;
  </code></pre>
  <p>My javascript is like this but it doesn't work like I expected:</p>
  <pre><code>$(&quot;.credit-card-selected&quot;).click(function () {
    $(&quot;.credit-card-selected&quot;).removeClass(&quot;selected&quot;);
    $(this).addClass(&quot;selected&quot;);
  });
  
  $(&quot;.transfer-selected&quot;).click(function () {
    $(&quot;.transfer-selected&quot;).removeClass(&quot;selected&quot;);
    $(this).addClass(&quot;selected&quot;);
  });
  </code></pre>
  <p>And here is my css:</p>
  <pre><code>.new__order__choice .credit-card-selected {
    display: none;
  }
  
  .new__order__choice .credit-card-selected.selected {
    display: block;
  }
  
  .new__order__choice .transfer-selected {
    display: none;
  }
  
  .new__order__choice .transfer-selected.selected {
    display: block;
  }
  </code></pre>
  <p>Do you see the reason,</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>$(".credit-card-selected").click(function() {
    $(".credit-card-selected").removeClass("selected");
    $(this).addClass("selected");
  });
  
  $(".transfer-selected").click(function() {
    $(".transfer-selected").removeClass("selected");
    $(this).addClass("selected");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.new__order__choice .credit-card-selected {
    display: none;
  }
  
  .new__order__choice .credit-card-selected.selected {
    display: block;
  }
  
  .new__order__choice .transfer-selected {
    display: none;
  }
  
  .new__order__choice .transfer-selected.selected {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="title__area"&gt;
    &lt;div class="custom-select payment__method"&gt;
      &lt;select&gt;
        &lt;option value="0"&gt;ÖDEME TİPİ&lt;/option&gt;
        &lt;option value="1" class="transfer-selected"&gt;Havale - EFT&lt;/option&gt;
        &lt;option value="2" class="credit-card-selected"&gt;Kredi Kartı&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" id="credit-card-selected"&gt;
   Credit Card
  &lt;/div&gt;
  &lt;div class="row" id="transfer-selected"&gt;
    Transfer
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>