Collapse bootstrap opens all tabs at the same time

  <div class="taskList">
                    <div class="taskToDo clearfix data-toggle="collapse">
                        <span class="col-sm-8 taskTitle">
                            <span class="checkTask"><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>
                            limpeza da piscina
                        </span>
                        <span class="col-sm-1 text-center label label-danger">01/10</span>
                        <span class="col-sm-2 text-center text-muted">quinzenal</span>
                        <span class="col-sm-1 text-center">
                            <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
                        </span>
                    </div>
                    <div class="taskDetail">
                        <p>
                            detalhes <br />
                            detalhes <br />
                            detalhes <br />
                            detalhes <br />
                        </p>
                        <div class="inner-editor">
                            <input type="text" class="form-control  " placeholder="Observacao">
                        </div>
                    </div>

Script

$(function () {
            $('.taskToDo').click( function () {
                $(".taskIcon").prev().find("glyphicon").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                $(".taskDetail").slideToggle('slow');
            });
        });
    });