change color of element clicked

I need to change the color of only the element that was clicked, in case I change the background color of the div - it is cloned several times creating more div in html depending on how much is needed - in all cases I did using parent and siblings did not succeed, all remain color changing, I need only the div clicked change color, and the rest remain the default color.

     **Icon**
   <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down">
    </i>
    </a>

    <div class="panel-group" id="accordion">
        <div class="panel panel-default task">
            <div class="panel-heading  taskToDo">
                <span class="col-sm-8 taskTitle">
                    <span class="checkTask"><i class="fa fa-check" aria-hidden="true"></i></span>
                    descricao
                </span>
    </div>
       </div>
          </div>
       JS
       $(".taskIcon").on("click", function () {
       $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
       $(".boxTipoDeAtividade").hide();
       $(".taskAtividades").addClass("glyphicon-chevron-down"); 
       **$(".taskToDo").addClass("taskToDoBackground");**
       });
       CSS 
       .taskToDoBackground{
       background-color: #efefef !important;
        }