How to add one class at a time and remove previously added classes?
<p>How to add only <strong>selected class</strong> and <strong>remove other class</strong> which is selected before?</p>

<pre><code>&lt;html&gt;
    &lt;select name="Button-Style" id="Button-Style" style="width:100%;"&gt;

     &lt;option value="Sun-Flower"&gt;Sun Flower&lt;/option&gt;
     &lt;option value="orange-flat"&gt;orange-flat&lt;/option&gt;


   &lt;/select&gt;


    &lt;script&gt;
    $(document).ready(function(){
        $('#Button-Style').change(function(){
          if($(this).val() == 'sun-flower'){
             $("#$id&gt;input").addClass('sun-flower-button');
              }
          else if($(this).val() == 'orange-flat'){
             $("#" + id).addClass('orange-flat-button');
              }



          else{

              }
        });
    });
    &lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>I want to add only one class at a time.</p>