how to find an element in a group

how to find an element in a group

Hi, I have multiple element in one div, and I trying to add class after clicking one the elements, and the class on other elements should be removed. It is something like radio button group, there is one element selected each time. How can I do that through Jquery. I attached my code, for example, when seat1 is clicked,the class on seat2 and seat3 should be removed.

  1. $( "#seat1"). click( function(){
             $( "#seat1"). toggleClass( "selected");
              $( "#datepicker-3"). toggle();
          });
  2.              < div  class= "col-sm-6 mb-3 mb-md-0" >
                   < div  class= "card" >
                     < div  class= "card-body" >
                       < h5  class= "card-title" >select seat </ h5 >
                         < div  class= 'seat available' id =  "seat1" >1 </ div >
                         < div  class= 'seat available' id =  "seat2" >2 </ div >
                         < div  class= 'seat available' id =  "seat3" >3 </ div >
                         < div  class= 'seat available' id =  "seat4" >4 </ div >
                         < div  class= 'seat available' id =  "seat5" >5 </ div >
                         < div  class= 'seat available' id =  "seat6" >6 </ div >

                        
                         < div  class= 'seat available' id =  "seat7" >7 </ div >
                         < div  class= 'seat available' id =  "seat8" >8 </ div >
                         < div  class= 'seat available' id =  "seat9" >9 </ div >
                         < div  class= 'seat available' id =  "seat10" >10 </ div >
                         < div  class= 'seat available' id =  "seat11" >11 </ div >
                         < div  class= 'seat available' id =  "seat12" >12 </ div >
                         < div  class= 'seat available' id =  "seat13" >13 </ div >
                         < div  class= 'seat available' id =  "seat14" >14 </ div >
                         < div  class= 'seat available' id =  "seat15" >15 </ div >
                         < div  class= 'seat available' id =  "seat16" >16 </ div >
                         < div  class= 'seat available' id =  "seat17" >17 </ div >
                         < div  class= 'seat available' id =  "seat18" >18 </ div >
                         < div  class= 'seat available' id =  "seat19" >19 </ div >
                         < div  class= 'seat available' id =  "seat20" >20 </ div >
                         < div  class= 'seat available' id =  "seat21" >21 </ div >
                         < div  class= 'seat available' id =  "seat22" >22 </ div >
                         < div  class= 'seat available' id =  "seat23" >23 </ div >
                         < div  class= 'seat available' id =  "seat24" >24 </ div >
                         < div  class= 'seat available' id =  "seat25" >25 </ div >
                         < div  class= 'seat available' id =  "seat26" >26 </ div >
                         < div  class= 'seat available' id =  "seat27" >27 </ div >
                         < div  class= 'seat available' id =  "seat28" >28 </ div >
                         < div  class= 'seat available' id =  "seat29" >29 </ div >
                         < div  class= 'seat available' id =  "seat30" >30 </ div >
        
                     </ div >
                   </ div >
                 </ div >