Is it possible to work two different javascript queries for different functionality on single HTML section?

I have made an HTML section. In this section, I have used two containers in a div tag and made it flex so that the final containers would be visible left and right. In the left container, I made three card from top to bottom, and in the right container, I inserted the three images and made them position absolute, so that it will be on one to another. I have used one JavaScript query so that in 5 seconds intervals other images will be visible and the left should be displayed none. But I want to use one more query, and in that, I want functionality that whenever I hover on any card that card's respective image should be visible. For example, if the second/third image is visible and I hover over the first card then the first image should appear.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}, 5000);
// for first image
function change1() {
document.getElementById("img1").src = "images/50k.png";
}
function change2() {
document.getElementById("img1").src = "images/50k.png";
}
// for second image
function change3() {
document.getElementById("img2").src = "images/insta-pic.png";
}
function change4() {
document.getElementById("img2").src = "images/insta-pic.png";
}
// for third image
function change5() {
document.getElementById("img3").src = "images/stats.png";
}
function change6() {
document.getElementById("img3").src = "images/stats.png";
}

<!-- language: lang-css -->

.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}

<!-- language: lang-html -->

<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card" onmouseover="change1()" onmouseout="change2()">
<h2>why1</h2>
</div>
<div class="card" onmouseover="change3()" onmouseout="change4()">
<h2>why2</h2>
</div>
<div class="card" onmouseover="change5()" onmouseout="change6()">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="images/50k.png" alt="img1" id="img1" class="visible">
<img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
<img src="images/stats.png" alt="img3" id="img3" class="hidden">
</div>
</div>

<!-- end snippet -->

Solution Link

You can my solution working here on CodePen.

HTML

• Each image uses the onmouseover you had but I also added a onmouseout to handle leaving.
• Each of the images calls the same JS functions but passes in its id as a parameter

<div class="why-choose-main-container">
	<div class="why-choose-details">
		<div class="card" onmouseover="onHover('img1')" onmouseout="onHoverLeave('img1')">
			<h2>why1</h2>
		</div>
		<div class="card" onmouseover="onHover('img2')" onmouseout="onHoverLeave('img2')">
			<h2>why2</h2>
		</div>
		<div class="card" onmouseover="onHover('img3')" onmouseout="onHoverLeave('img3')">
			<h2>why3</h2>
		</div>
	</div>
	<div class="why-choose-image">
		<img src="images/50k.png" alt="img1" id="img1" class="visible">
		<img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
		<img src="images/stats.png" alt="img3" id="img3" class="hidden">
	</div>
</div>

JS

• The timer function keeps track of the active image but only shows it when the hovering effect is not active
• onHover is called whenever the mouseover event is called which calls showHoverImage, a function that hides the active image and shows the hovered image
• onHoverLeave does the reverse when the onmouseout event occurs

var hoverActive = false;

var activeImageId = 1;
var activeImage = document.getElementById("img" + activeImageId);

setInterval(function () {
	// Work out which image is next
	var nextImageId = (activeImageId % 3) + 1;
	var nextImage = document.getElementById("img" + nextImageId);

	// Change shown image
	if (!hoverActive) {
		showImage(nextImage);
		hideImage(activeImage);
	}

	//Next image is now active
	activeImage = nextImage;
	activeImageId = nextImageId;
}, 5000);



function onHover(imageName) {
	hoverActive = true;
	var hoverImage = document.getElementById(imageName);
	showHoverImage(hoverImage);
}

function showHoverImage(hoverImage) {
	hideImage(activeImage);
	showImage(hoverImage);
}

function onHoverLeave(imageName) {
	hoverActive = false;
	var hoverImage = document.getElementById(imageName);
	hideHoverImage(hoverImage);
}

function hideHoverImage(hoverImage) {
	hideImage(hoverImage);
	showImage(activeImage);
}


function showImage(docImage) {
	if (docImage) {
		docImage.classList.replace("hidden", "visible");
	}
}
function hideImage(docImage) {
	if (docImage) {
		docImage.classList.replace("visible", "hidden");
	}
}

I tried to change the function and JS code. Is that your ideal?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
changeImgByID();
}, 5000);
function changeImgByID() {
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}
// for first image
function changeImg(val) {
nextImageId=val;
changeImgByID();
}

<!-- language: lang-css -->

.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}

<!-- language: lang-html -->

<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card img-1" onmouseover="changeImg(1)">
<h2>why1</h2>
</div>
<div class="card img-2" onmouseover="changeImg(2)">
<h2>why2</h2>
</div>
<div class="card img-3" onmouseover="changeImg(3)">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="img1" id="img1" class="visible">
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="img2" id="img2" class="hidden">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="img3" id="img3" class="hidden">
</div>
</div>

<!-- end snippet -->