How do I shift an icon or button onclick on it

Question

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

Welcome to StackOverflow! Please add a minimal reproducible example so that we can help you better! — deepakchethan, Nov 16 '22 at 10:22
As it seems, you probably need to use grid or flex properties please have a tour and read through this in order for us to help you: https://stackoverflow.com/help/minimal-reproducible-example — dante velli, Nov 16 '22 at 10:22
I agree with the others, it would be better if you added more details and the html as well. Cart was a misleading word by the way. I guess you should, in the click event handler, just fetch the container element and append your new element to it (prepending it before the plus icon element). But that's as far as someone can suggest if you don't share anything else — Diego D, Nov 16 '22 at 10:32

score 0 · Accepted Answer · answered Nov 16 '22 at 10:33

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>

Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. — Adriaan, Nov 16 '22 at 11:18

How do I shift an icon or button onclick on it

1 Answers1