I created a mini Qcm, when I click on an answer the check moves on the div on which I clicked

const reps = document.getElementsByClassName('rep');
[].forEach.call(reps, function(rep) {
  $(rep).click(function() {
    if (!rep.querySelector('.check')) {
      [].forEach.call(reps, function(repToDel) {
        if (repToDel.querySelector('.check')) {
          repToDel.querySelector('.check').remove()
        }
      })
      $(rep).last().append('<div ><object data="check.svg" width="20" > </object></div>')
    }

  })
})

.container {
  padding: 5%;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.question_title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.container_reps {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.rep {
  display: flex;
  align-items: center;
  border: 1px solid black;
  padding: 0 10px;
  max-width: 15%;
  min-width: 170px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}

.dot_rep {
  background-color: black;
  color: white;
  margin-right: 7px;
  padding: 5px 10px;
  border-radius: 5px;
}

.text_rep {
  font-weight: 700;
}

.check {
  margin-left: 20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div >
  <div >
    <p>Je suis une Question, quelle est votre reponse ?</p>
  </div>
  <div >
    <div >
      <span >A</span>
      <p >Reponse 1</p>
    </div>
    <div >
      <span >B</span>
      <p >Reponse 2</p>
    </div>
    <div >
      <span >C</span>
      <p >Reponse 3</p>
    </div>
    <div >
      <span >D</span>
      <p >Reponse 4</p>
    </div>
  </div>
</div>

but when I click the div get big and back to normal at the same time,I tried the overflow:hidden, but it didn't work. the change between the check must be done smoothly.

CodePudding user response：

With this JQuery code and if the image is present it's works

$(function(){

 const reps = document.getElementsByClassName('rep');

    [].forEach.call(reps,function(rep){

        $(rep).click(function(){

        // Remove Check Div only for Old Check
        [].forEach.call(reps,function(repToDel) { if(repToDel.querySelector('.check'))  repToDel.querySelector('.check').remove(); });

        // Put Check Div for New Check
        if(! rep.querySelector('.check'))   $(rep).last().append('<div ><object data="check.png" width="20" > </object></div>');
        
      });
    });
});