Change the name of class of div on click

Question

I have written below lines of code

        $(document).ready(function()
        {

           $('.btn-custom').click(function() { 
              var id = $(this).attr('id');
              $('.btn-custom').addClass('.btn-custom-primary');
              $("#"+id).addClass('btn-custom-selected');
           });
           ...
         });

The html of these custom buttons are rendered in browser as

      <div id="rooms-information" class="form-group">
      <div id="3ccd3803-a8ba-0328-cf9d-28bb72abbcae" class="btn-custom btn-custom-primary col-md-4 room-no-6"><div class="room-info-section"><span>Room No.: 6</span><br><span id="room0">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 8</span><br><span>Available: 8</span></div></div>
      <div id="4908ec27-b2ca-7bf7-de3d-83181d5c41a6" class="btn-custom btn-custom-primary col-md-4 room-no-1"><div class="room-info-section"><span>Room No.: 1</span><br><span id="room1">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div></div>
      <div id="531709a7-6bc2-ddbe-3f3d-1642b7d70929" class="btn-custom btn-custom-primary col-md-4 room-no-3"><div class="room-info-section"><span>Room No.: 3</span><br><span id="room2">Simple</span></div><div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div></div>
      <div id="cac24d40-0e85-6707-9797-5f9f3449ecf8" class="btn-custom btn-custom-primary col-md-4 room-no-4"><div class="room-info-section"><span>Room No.: 4</span><br><span id="room3">Deluxe</span></div><div class="capacity-info"><span>Total Capacity: 6</span><br><span>Available: 6</span></div></div>
      </div>

I want to change the name of class of the div which is selected or clicked and the rest of the div should contain original class "btn-custom-primary". The above code is not working... Please help!!!

Answer 1

Is this what you want?

$(document).ready(function() {
  $('.btn-custom').click(function() { 
    console.log("test");
    var id = $(this).attr('id');
    $('.btn-custom').removeClass('btn-custom-selected').addClass("btn-custom-primary");
    $(this).removeClass("btn-custom-primary").addClass('btn-custom-selected');
  });
});

Demo

 $(document).ready(function() { $('.btn-custom').click(function() { var id = $(this).attr('id'); $('.btn-custom').removeClass('btn-custom-selected').addClass("btn-custom-primary"); $(this).removeClass("btn-custom-primary").addClass('btn-custom-selected'); }); }); 

 .btn-custom-selected { color: blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rooms-information" class="form-group"> <div id="3ccd3803-a8ba-0328-cf9d-28bb72abbcae" class="btn-custom btn-custom-primary col-md-4 room-no-6"> <div class="room-info-section"><span>Room No.: 6</span><br><span id="room0">Deluxe</span></div> <div class="capacity-info"><span>Total Capacity: 8</span><br><span>Available: 8</span></div> </div> <div id="4908ec27-b2ca-7bf7-de3d-83181d5c41a6" class="btn-custom btn-custom-primary col-md-4 room-no-1"> <div class="room-info-section"><span>Room No.: 1</span><br><span id="room1">Deluxe</span></div> <div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div> </div> <div id="531709a7-6bc2-ddbe-3f3d-1642b7d70929" class="btn-custom btn-custom-primary col-md-4 room-no-3"> <div class="room-info-section"><span>Room No.: 3</span><br><span id="room2">Simple</span></div> <div class="capacity-info"><span>Total Capacity: 4</span><br><span>Available: 4</span></div> </div> <div id="cac24d40-0e85-6707-9797-5f9f3449ecf8" class="btn-custom btn-custom-primary col-md-4 room-no-4"> <div class="room-info-section"><span>Room No.: 4</span><br><span id="room3">Deluxe</span></div> <div class="capacity-info"><span>Total Capacity: 6</span><br><span>Available: 6</span></div> </div> </div> 

Answer 2

You are doing much more than required. When clicking on some element you'll its reference with $(this) in handler function in jQuery. And there you can just add whatever class you want for the specific clicked element.

All the other divs already have class btn-custom-primary . So you don't need to add it the second time

$('.btn-custom').click(function() {
     $(this).removeClass('btn-custom-primary').addClass('btn-custom-selected');
});