Javascript 2d canvas collision?

I am currently making a simple game to try and better learn the language without frameworks or libraries. The collision systems always confuses me. For this game I need it to detect if either of the hazards collides with the player square. Also if you could explain the code for the collision detection I would appreciate it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dodge Game</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
        </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="1000"></canvas>  
    
        var canvas = document.getElementById("myCanvas");    //This variable will be use as a reference to the canvas object
        var ctx = canvas.getContext('2d');  //A variable to hold the value of the context

        var framesPerSecond = 60; //FPS

        const width = canvas.width; //Width of the canvas
        const height = canvas.height; //Height of the canvas    

        function createPlayer(){
            player = {
                x:400,
                y:600,
                //vx:5,
                w:25,
                h:25,
            }   
        }
        createPlayer();//Creates player once.


            hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            }
        function createHazard(){
                 hazard = {
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,
            }
            hazard2 ={
                x:Math.random() * (width),
                y:0,
                vx:10,
                w:25,
                h:25,  
            } 
        }
        setInterval(createHazard, 2000);

        function mouseMove(event){
        player.x = event.clientX - canvas.getBoundingClientRect().left - player.w / 2;
        if (player.x  width) player.x = width - player.w;
        }
        document.addEventListener("mousemove", mouseMove);

        function drawEverything(){
            ctx.fillStyle = 'red'; //Draws the red background every frame covering square
            ctx.fillRect(0, 0, width, height);

            ctx.fillStyle = 'black';
            ctx.fillRect(player.x, player.y, player.w, player.h); //Player

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard.x, hazard.y, hazard.w, hazard.h); //Hazard

            ctx.fillStyle = 'white';
            ctx.fillRect(hazard2.x, hazard2.y, hazard2.w, hazard2.h); //Hazard 2

        }

        function movement(){
            hazard.y += hazard.vx;   
            hazard2.y += hazard2.vx; 


        }

        function update(){
            drawEverything();
            movement();
        }
        setInterval(update, 1000/ framesPerSecond)
    
</body>
</html>


Source: stackoverflow-javascript

Having trouble targeting a single input among multiple elements with the same class name (jQuery)

I have a page with a list of li elements, each called .section. The page starts with just one section, but the user can add more with a click. Each section has a dropdown called .wip-location and three input fields called .section-number, .section-name, and .section-description. (The -number and -description inputs are irrelevant but I included them here just in case they are causing problems.)

Every time the dropdown is changed, I’d like the selected text to get filled into the .section-name input.

This works the first time (when there is only one .section, .wip-location, and .section-name on the page), but as soon as the user adds more .sections, it appears that Jquery is unable to figure out which element to act upon, and no inputs are filled.

HTML

<li class="section">
    
<label class="col-sm-2 text-sm-right">Section Name</label>
</div>