javascripthtmlcssbuttondisplayobject

How do I shift an icon or button onclick on it

How can we shift a button or icon towards the right and display a cart or any things that we created in button or icon place? for example, I made a cart containing students' info as shown in the image below. enter image description here

I am trying to shift that icon towards the right onclick on that plus button and display that cart in icon position. and am expecting that your contributions towards this issue will help me to move forwards

Solution 

  • function addNewStudent() {
  const button = document.querySelector('button.icon');

  const studentDiv = document.createElement('div');
  studentDiv.className = 'student';
  studentDiv.innerHTML = '<b>New Student</b>';

  button.insertAdjacentElement('beforebegin', studentDiv);
}
    .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.student {
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
  border-radius: 8px;
}

.icon {
  margin: 10px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer
}
    <div class="container">
  <div class="student">Student Card</div>
  <div class="student">Student Card</div>
  <button class="icon" onclick="addNewStudent()">+</button>
</div>