I want to change my code for obtaining creation of new round box after clicking any box from new created set of them, not only first box. How could I obtain this ability for my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="boxfull.css">
<title>Document</title>
</head>
<body>
<style>
body{
background-color:black;
}
.box{
width:100px;
height:100px;
background-image: linear-gradient(45deg, red, yellow);
border-radius:40px;
transition: box-shadow 0.5s ease;
display:inline-block;
user-select:none;
}
.box:hover{
box-shadow:inset 0px 0px 10px 8px rgba(55, 155, 50), inset 0px 0px 10px 16px rgba(55, 155, 255), inset 0px 0px 10px 24px rgba(155, 55, 255);
transition: box-shadow 0.5s ease;
}
</style>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', () => {
const setbox = document.createElement('div')
document.body.appendChild(setbox).classList.add('box')
})
</script>
</body>
</html>