Shubham Kumar Shubham Kumar - 1 year ago 58
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
Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download