How to change CSS properties back AFTER click?
<h2>What is happening</h2>

<p><a href="https://i.stack.imgur.com/vTYDh.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vTYDh.gif" alt="enter image description here"></a></p>

<p>As you can see, the Add button works fine before I click the Remove button. After I click the Remove button, the Add button stays the same color.</p>

<p><strong><em>What I would like to happen</em></strong> is for the Add button reverts to its old color.</p>

<p>I think the reason its doing this is because in my jQuery I change the colors, but I never change them back after the click is over.</p>

<p>If someone could help me with this I would really appreciated it!</p>

<h2>My code</h2>

<p><em>HTML</em></p>

<pre><code>&lt;div class="worksheet-problems"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-lg-7"&gt;
                            &lt;div class="form-group"&gt;
                                &lt;div class="input-group input-group-lg worksheet-problem"&gt;
                                    &lt;div class="input-group-btn"&gt;
                                        &lt;button type="button" class="btn btn-default button-bullet"&gt; &lt;span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"&gt;&lt;/span&gt; &lt;/button&gt;
                                    &lt;/div&gt;
                                    &lt;input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"&gt;
                                    &lt;div class="input-group-btn"&gt;
                                        &lt;button type="button" class="btn btn-default button-add" aria-label="Add"&gt; &lt;span class="glyphicon glyphicon-plus-sign" aria-hidden="true"&gt;&lt;/span&gt; &lt;/button&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
</code></pre>

<p><em>CSS</em></p>

<pre><code>/*get rid of grey shadow when press on buttons*/
.btn.button-add, .btn.button-bullet, .btn.button-bullet:active, .btn.button-add:active, .btn.button-add:focus, 
.btn.button-bullet:focus {
    box-shadow: none;
  -webkit-box-shadow: none;
}

/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet {
  background-color: transparent;

}

.btn.button-add:hover, #Done-Button:hover{
    background-color: #E5FFFB;
}

.glyphicon-plus-sign, .glyphicon-ok-sign{
    color: #02C8A7;
}
</code></pre>

<p><em>jQuery</em></p>

<pre><code>$(".worksheet-problems").on("click", ".button-add", function(){
    $(this).css("background-color", "#02C8A7");
    $(this).children(".glyphicon").css("color", "#E5FFFB");
});
</code></pre>

<p><a href="https://jsfiddle.net/14ongm/py1q2y37/" rel="nofollow noreferrer">JSFiddle</a></p>

<h2>UPDATE</h2>

<p>I realized that the glitch is not because I click the Remove button. It's because when I click the Add button, I change the color of that Add button and also clone it to become the next Problem row. </p>

<p>So though these answers change the color of the Add button when the Remove button is clicked, I realize I need something that changes the Add button back after it is cloned to the next row.</p>

<p>Is there some way to delay reverting the Add button color back for half a second? I'm trying to use delay but I don't think I'm using it correctly because nothing is happening.</p>

<p><em>Updated jQuery</em></p>

<pre><code>$(".worksheet-problems").on("click", ".button-add", function () {
    var $row = $(this).closest('.row');
    var $wsProbRow = $row.clone(true);
    $wsProbRow.find("input[type='text'][name='Worksheet-Problem']").val("");
    $wsProbRow.insertAfter($row);
    $(this).css("background-color", "#02C8A7");
    $(this).children(".glyphicon").css("color", "#E5FFFB").delay(500).queue(function(){
        $(this).css("background-color", "transparent");
        $(this).children(".glyphicon").css("color", "#02C8A7");
    });
});
</code></pre>

<p><a href="https://jsfiddle.net/14ongm/py1q2y37/3/" rel="nofollow noreferrer">Updated JSFiddle</a></p>