Applying if and else condition to add and remove class using jQuery
<p>I have created the below code where I want to create an if/else condition where when the user clicks on the label, a class would be added and when unclicks, that class would be removed. I am stuck-up applying the same.</p>

<p>My code as below.</p>

<p><strong>LIVE FIDDLE LINK</strong></p>

<p><strong><a href="https://jsfiddle.net/zdwjnLvL/" rel="nofollow">Complete working code here</a></strong></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="customCheckboxBtns"&gt;
&lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-2" type="checkbox"&gt;1&lt;/label&gt;&lt;/div&gt;
&lt;div class="ck-button"&gt;&lt;label class="selected"&gt;&lt;input checked="checked" name="column-3" type="checkbox"&gt;2&lt;/label&gt;&lt;/div&gt;&lt;!-- This is how it will be added dynamically --&gt;
&lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-4" type="checkbox"&gt;3&lt;/label&gt;&lt;/div&gt;
&lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-5" type="checkbox"&gt;4&lt;/label&gt;&lt;/div&gt;
&lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-6" type="checkbox"&gt;5&lt;/label&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.customCheckboxBtns{
    margin-bottom: 1rem;
    margin-top: 0.25rem;
    overflow:auto;
}

.ck-button {
    margin-right: 0.375rem;
    background-color:#ffffff;
    border-radius:4px;
    border:1px solid #26a69a;
    overflow:auto;
    float:left;
    font-family: 'Source Sans Pro', sans-serif;
    transition: all 0.2s ease 0s;
    color:#999999;
}

.ck-button:hover {
    background:#7dcac2;
    border:1px solid #26a69a;
    color:#26a69a;
    background-color:#ffffff;
}

.ck-button label {
    text-align:center;
    padding: 0.25rem 0.5rem;
    display:block;
    background:#26a69a;
    color:#ffffff;
    transition: all 0.2s ease 0s;
}
.ck-button label:hover{
    cursor:pointer;
}
.ck-button input:checked {
    background: #26a69a none repeat scroll 0 0; 
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease 0s;
}
.ck-button label:hover{
    background: #7dcac2 none repeat scroll 0 0;
    color:#ffffff;  
}
.ck-button label input {
    position:absolute;
    /*top:-2000px;*/
}
.ck-button label input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}
label.selected{
    background: #7dcac2 none repeat scroll 0 0;
      color:#ffffff;    
}
</code></pre>

<p><strong>SCRIPT</strong></p>

<pre><code>$('.ck-button label').on('click', function () {
    $(this).addClass('selected');    
});

$('.ck-button label').on('click', function () {
    $(this).removeClass('selected');
});
</code></pre>