⛳️Before and After⛳️ in JS

// Select the original button using jQuery
const button = $('button');

// Create a new button that says 'Info'
const infoBtn = document.createElement('button');
infoBtn.classList.add('btn', 'btn-primary', 'px-5');
infoBtn.innerText = 'Info';

// Create a new button that says 'Cancel'
const cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn', 'btn-secondary', 'px-5');
cancelBtn.innerText = 'Cancel';

// Place the 'Info' button before the original button
button.before(infoBtn);

// Place the 'Cancel' button after the original button
button.after(cancelBtn);

// Just for fun, let's imagine these buttons in action
console.log("The Info button is like the appetizer, it comes before the main course!");
console.log("The Cancel button is like dessert, it comes after everything else is done!");

In this version, the before and after methods are used with a humorous analogy, comparing the placement of the buttons to courses in a meal:

The infoBtn (Info button) is placed before the original button, likened to an appetizer.
The cancelBtn (Cancel button) is placed after the original button, likened to dessert.
This adds a fun and relatable context to understanding how the buttons are positioned in relation to the original button.