Hello I need help to change image with mouseover function

I only get one image and I need multiple images, I attach my code.

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=f, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS practice Image Mouse Over</title>
</head>

<body>
  <!-- -->
  <div id="div"></div> 
  <img src="img/01.SanitariosC.png" alt="Sanitarios" id="sanitarios"> 
  <img src="img/02.GriferiasC.png" alt="Griferias" id="griferias">
  <script src="js/index.js"></script>
</body>
</html> 

```

```
/* SANITARIOS*/ 
let image = document.getElementById('sanitarios'); 
function changeToLike() { 
  image.src="img/01.SanitariosE.png"; 
} 

function changeToDislike() { 
  image.src="img/01.SanitariosC.png"; 
}

image.addEventListener('mouseover', changeToLike); image.addEventListener('mouseout', changeToDislike); 

```

```
/* GRIFERIAS*/ 
let image1 = document1.getElementById1('griferias'); 

function changeToLike1() { 
  image1.src="img/02.GriferiasE.png"; 
} 

function changeToDislike1() { 
  image1.src="img/02.GriferiasC.png"; 
} 

image1.addEventListener1('mouseover', changeToLike1); image1.addEventListener1('mouseout', changeToDislike1);

```