title: How to add class onClick and remove class
body: <p>This title has been all ready asked, but my problem is different than other topics. </p>
  
  <p>I have an function what generates my div:</p>
  
  <pre><code>function createInventory(response)
  {
    var trHTML = '';
    $.each(response, function (i, item) {
      //console.log(item.name+": "+item.quantity);
      if(item.quantity==null)
      {
        item.quantity="";
      }
      trHTML+='&lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used'+i+'"&gt;'+item.name+"&lt;br&gt;"+item.quantity+'&lt;div class="itemoption"&gt;&lt;button  id="sell-'+i+'" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info'+i+'"&gt;Info&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;';
    });
    $('.inventory-items').html(trHTML);
  
  }
  </code></pre>
  
  <p>In html it should be like this:</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-css lang-css prettyprint-override"><code>.inventory
  {
    position: relative;
    top:60%;
    left:50%;
    width:400px;
    height:600px;
  }
  
  .inventory-items
  {
    width:100%;
    height: 80%;
    background: black;
  }
  
  .inven-free
  {
    width:24.5%;
    height: 24.5%;
    border:1px solid white;
    float:left;
  
  }
  
  #slot-used
  {
  
  
  }
  
  #sellquantity
  {
    width:140px;
    height: 80px;
    background-color: white;
    border:1px solid black;
  
  }
  
  .inventory-head
  {
    width:100%;
    background-color: green;
    height: 5%;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inventory"&gt;
     &lt;div class="inventory-head"&gt;&lt;input id=""&gt;&lt;button&gt;Sell&lt;/button&gt;&lt;/div&gt;
     &lt;div class="inventory-items"&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used1" class="active"&gt;
           Soff&lt;br&gt;29
           &lt;div class="itemoption"&gt;&lt;button id="sell-1" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info1"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used2" class="active"&gt;
           Clean-water&lt;br&gt;316
           &lt;div class="itemoption"&gt;&lt;button id="sell-2" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info2"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used3"&gt;
           Dirty-water&lt;br&gt;127
           &lt;div class="itemoption"&gt;&lt;button id="sell-3" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info3"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used4"&gt;
           Saaremaa&lt;br&gt;49
           &lt;div class="itemoption"&gt;&lt;button id="sell-4" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info4"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used5" class="active"&gt;
           Glamur&lt;br&gt;6
           &lt;div class="itemoption"&gt;&lt;button id="sell-5" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info5"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used6"&gt;
           Laudur&lt;br&gt;25
           &lt;div class="itemoption"&gt;&lt;button id="sell-6" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info6"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used7"&gt;
           Lurker&lt;br&gt;
           &lt;div class="itemoption"&gt;&lt;button id="sell-7" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info7"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used8"&gt;
           Obi&lt;br&gt;
           &lt;div class="itemoption"&gt;&lt;button id="sell-8" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info8"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used9"&gt;
           Savage&lt;br&gt;
           &lt;div class="itemoption"&gt;&lt;button id="sell-9" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info9"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used10"&gt;
           Savage&lt;br&gt;
           &lt;div class="itemoption"&gt;&lt;button id="sell-10" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info10"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used11"&gt;
           Savage&lt;br&gt;
           &lt;div class="itemoption"&gt;&lt;button id="sell-11" onclick="sellItem(this.id)" type="button"&gt;Sell&lt;/button&gt;&lt;button id="info11"&gt;Info&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="inven-free" id="slot-free  0"&gt;test&lt;/div&gt;
        &lt;div class="inven-free" id="slot-free  1"&gt;test&lt;/div&gt;
        &lt;div class="inven-free" id="slot-free  2"&gt;test&lt;/div&gt;
        &lt;div class="inven-free" id="slot-free  3"&gt;test&lt;/div&gt;
        &lt;div class="inven-free" id="slot-free  4"&gt;test&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using onclick to know what id number I have on different boxes.</p>
  
  <p>I want to add class to selected box(when selected by sell button). <strong>Now my problem is that I cant remove class from older clicked ids.</strong> They all get <code>active</code> class what were/is clicked, but I dont want that, I want only the clicked one to have <code>active</code> class and if new one is click it should remove last one.</p>
  
  <p>Anyways my function is here how I'm adding classes atm:</p>
  
  <pre><code>function sellItem(clicked_id)
  {
    var trHTML = '';
    var id=clicked_id.split("-")[1];
  
    $("#slot-used"+id).removeClass('active')
    $("#slot-used"+id).addClass('active')
    $("#slot-used"+id).toggleClass('active');
  
      trHTML+='&lt;input id=""&gt;&lt;button&gt;Sell&lt;/button&gt;';
      $(".inventory-head").html(trHTML);
  }
  </code></pre>