Button doesn’t change bg image from an ID element inside of a element (PHP, JS, HTML)

Im not good at programming in PHP and JS, but im trying to make a button that changes the background image from an ID element that is inside of a incorporated style ( element) using this code:

My PHP/HTML code and button:

 <?php 
    $old-img-url = 'old-image.png';
    $new-img-url = 'new-image.png';
 ?>
 
 <style> #my-div-id *{ background-image: url('<?php echo $old-img-url ?>'); } </style>

 <div id='my-div-id'>
  // my extra code...
 </div>

 <?php
    echo "<button onclick='changeImage()'>Change image</button>";
 ?>

My script (out of the PHP code):

 <script>
 function changeImage() {
    const Imagechange = document.querySelector('#my-div-id');
    Imagechange.style.backgroundImage = "url('<?php echo $new-img-url ?>')";
 }
 </script>

Welp, my problem is that the button works and loads the url of the new background image for the ID, but it doesn’t replace it. It appears like this:
Error screenshot

It’s there any way to fix this? And if not, is there an alternative for give a solution to this? Thanks and cheers.

Note: I tried quitting some PHP line codes to convert then in HTML elements, because i know that PHP renders all the elements written inside of it into the page and doesn’t allows you to do more changes when it is rendered, so then, i tried to do that to see if there was a difference, but there wasn’t. So it stills with the same problem.