Disable Selected And Other Objects In Javascript

I have this door open/close script made from HTML, CSS, and JavaScript which I got from here. My question is how can I disable/prevent from clicking/closing again the same selected

Solution 1:

Updated and fixed :

• In JQuery you can just use the .off() method on the main to remove the click event.
  Ex: $('section.container').off("click");
  
• In pure javascript (vanilla) you can just use the removeEventListener() method.
  Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);

You can take a look at my fixed CodePen.

for (var i = 1; i < 30; i++) {
  $('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}

$('section.container').on('click', '.doorFrame', (event) => {
  $('section.container').off("click");
  
  let doorFrame = $(event.currentTarget);
  doorFrame.find('.swing').toggleClass('flipped');
});

body {
  font-family:sans-serif;
}

.container {
  background-color: tan;
  perspective: 5000px;
  margin: 100px;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

.doorFrame {
  width: 80px;
  height: 130px;
  margin: 10px;
  float: right;
  background-color:brown;
  color:#fff;
  padding:5px 5px 2px 5px;
}

.door {
  width:100%;
  height:100%;
  text-align:center;
  cursor:pointer;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transform-style: preserve-3d;
  transition: transform .5s, box-shadow .5s;
  transform-origin: right center; 
}

.door:hover {
  outline:3px solid white;
}

.door figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.door .front {
  background-color:green;
  width:80px;
  height:130px;
}

.door .back {
  transform: rotateY( 180deg);
}

.door img {
  width:100%;
  height:100%;
}

.door.flipped {
 transform: rotateY( 120deg);
  box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
  <div class="doorFrame" id="c0">
    <div class="door swing">
      <figure class="front">
        <img src="http://www.sharecg.com/images/medium/11603.jpg">
      </figure>
      <figure class="back">
        <img src="http://www.sharecg.com/images/medium/11603.jpg">
      </figure>
    </div>
  </div>
</section>

Solution 2:

The simple solution is to just use one

-- edit --

Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications

//edit - using on instead of one
$('.doorFrame').on('click',function(event){
  console.log('click');
  //edit - removing listener for all doorFrames
  $('.doorFrame').off('click', this);
  var doorFrame = $(event.currentTarget)
  // open door
  doorFrame.find('.swing').toggleClass('flipped');

  // ajax code here
 
});