Shubham Kumar Shubham Kumar - 4 months ago 4
Javascript Question

able to Select and deselect multiple elements in html and keep track of what has been selected

My HTML template will be appended many times depending upon the backend. So, I want to select the topics and send the id of selected elements. How to do it?
Right now I can only select and also after that i can't de-select it too.

My Jquery code to select:

var clicked =;
var currentID = || "No ID!";

document.getElementById(currentID).style.backgroundColor = "#00afbc";

My Html code:

<div class="container-fluid" id="container-<%=no%>">

<div id="circle" style="background:<%= colorCode %>;" class="col-xs-3">
<div class="text" style="color:<%= textColor %>;">
<%=p ercent %>
<div class="percent" style="color:<%= textColor %>;">%</div>

<div id="sideText">
<div class="checkbox col-xs-9 everything-checkbox">
<!--input type="checkbox" class="toggle" /-->
<div id="currentID">
<%=currentID %>

<div id="question">
<%=t otalQues %> Questions Attempts


<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" />

Raw Raw

You can just add and remove a class to keep track of the selected items and then just get all the selected items with an ID

$(document).ready(function () {
    $(document.body).click(function (evt) {
        var clicked =;
        if (!$(clicked).hasClass('selected')) {
            $(clicked).css('background-color', '#00afbc');
        } else {
            $(clicked).css('background-color', '');

function getSelected() {
    var ids = [];
    $('.selected').each(function () {
        var id = $(this).attr('id');
        if (id) {
    return ids;