We Keep Coding

How to make the next 3 images appear in carousel?

I am trying to make my slider slide to the next 3 slides in my carousel.How it should work is the first 3 images should show, and then when you click the next arrow the next 3 images should show.
I am not sure where I am going wrong. Basically the opacity of the last 3 pictures should be 0 until you click next then the opacity becomes 1 for the next 3 pictures.
This is what I have done so far:
HTML:
<section>
<div class="immigration-service">
<h1>Cross-border financial and immigration services</h1>
<div class="carousel">
<ul>
<li>
<img
class="slide"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
</ul>
<button class="button prev" data-carousel-button="prev">
<
</button>
<button class="button next" data-carousel-button="next">
>
</button>
</div>
</div>
</section>
CSS:
.immigration-service
{
margin-top: 34vh;
}
.immigration-service h1
{
padding-top: 113px;
text-align: center;
}
.immigration-service ul
{
display: flex;
margin:0;
padding:0;
overflow:hidden;
}
.immigration-service li
{
display: block;
list-style-type: none;
}
.button {
display: flex;
font-size: 60px;
align-items: center; justify-content: center;
color: #115577;
width: 30px;
height: 50px;
border: 0px;
}
button.prev {
position: absolute;
left: 0;
top: 106vw;
}
button.next {
position: absolute;
right: 55vw;
top: 106vw;
}
Javascript:
let images = document.querySelectorAll('ul li');
let index = 0;
window.show = function(increase) {
index = index + increase;
index = Math.min(Math.max(index,0), images.length-1);
images[index].scrollIntoView({behavior: 'smooth'});
}

Carousel right click button not working properly

i have a typical carousel when i click left button if marginLeft is 0 it doesn't slide but i don't know what limited value to set for the slider when i click right button.
i tried calculating the images width and the margin space between them to set the limit value for the right button so slider doesn't slide past it but that doesn't work if you see it on another device because it's width is higher.
codepen : https://codepen.io/anon/pen/bXBaYW?editors=1010
// caoursel
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
const slideImgs = carousel.querySelectorAll('.slide img');
let marginLeft = 0;
// works fine
function scrollLeft() {
if (getComputedStyle(slides).marginLeft >= '0px') return;
marginLeft += 310;
slides.style.marginLeft = marginLeft + "px";
}
// need to set right slide a limited value.
function scrollRight() {
if (getComputedStyle(slides).marginLeft <= '-1240px') return; // dont scroll past this value
marginLeft -= 310;
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);
i want the slider to stop sliding when i reach the last image.

What you need to do is to not hardcode the width of the .slides container in CSS and JS.
Thus allowing you to dynamically compute the width of the .slides container, and the remaining space you can scroll/slide.
Below is an illustration of the variable and their values in relation to the whole component.
remainingSpaceToScroll will tell you how much space you have on the right, so you can not exceed the limit. The value of it can be found with simple math, by subtracting the sum of parentWidth and currentScroll from the value in scrollWidth.
Here is the code from your example updated so you can inspect.
I've removed the space between the slides for the simplicity sake.
https://codepen.io/anon/pen/BXpaNv
const carousel = document.getElementById("carousel");
const leftArrow = carousel.querySelector(".carousel-left-arrow");
const rightArrow = carousel.querySelector(".carousel-right-arrow");
const slides = carousel.querySelector(".slides");
const slideImgs = carousel.querySelectorAll(".slide img");
let marginLeft = 0;
let carouselImageWidth = 300;
function scrollLeft() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = currentScroll;
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll - carouselImageWidth);
} else {
marginLeft = -(currentScroll - remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
function scrollRight() {
let parentWidth = carousel.offsetWidth;
let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
let currentScroll = Math.abs(
parseInt(getComputedStyle(slides).marginLeft, 10)
);
let remainingSpaceToScroll = scrollWidth - (parentWidth + currentScroll);
if (remainingSpaceToScroll <= 0) {
return;
} else if (remainingSpaceToScroll >= carouselImageWidth) {
marginLeft = -(currentScroll + carouselImageWidth);
} else {
marginLeft = -(currentScroll + remainingSpaceToScroll);
}
slides.style.marginLeft = marginLeft + "px";
}
leftArrow.addEventListener("click", scrollLeft);
rightArrow.addEventListener("click", scrollRight);
HTML below:
<p>click right arrow till end</p>
<div id="carousel">
<span class="carousel-left-arrow arrow"><</span>
<ul class="slides">
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
<li class="slide">
<a href="#">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</li>
</ul>
<span class="carousel-right-arrow arrow">></span>
</div>
CSS below:
#carousel {
width: 90%;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 122px;
}
#carousel .arrow {
position: absolute;
top: 32%;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #000;
border-radius: 0%;
cursor: pointer;
width: 20px;
z-index: 1;
}
#carousel .arrow img {
margin-top: 10px;
max-width: 100%;
}
#carousel .carousel-left-arrow {
width: 25px;
left: 0;
margin-left: 5px;
}
#carousel .carousel-right-arrow {
right: 0;
width: 25px;
}
#carousel .slides {
overflow: hidden;
list-style: none;
padding: 0;
transition: 0.2s;
margin-left: 0;
margin-right: 0;
border: 1px solid red;
height: 120px;
position: absolute;
left: 0;
top: 0;
margin: 0;
display: flex;
}
#carousel .slide {
float: left;
margin: 0;
text-decoration: none;
color: whitesmoke;
}
#carousel .slide > a {
display: block;
}
#carousel .slides img {
width: 300px;
display: block;
}

How to Show PNG layers on Hover

I want to implement something like
http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Bedroom/products/-1
and another sample
http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Family_Room/products/-1,-1,-1,-1,-1
but what I've already done is:
please Run snippet
when you hover on menu bar the item shown in on the image.
I put a base image on the floor and stack several PNG. for hover based on the menu, it's fine. But if we want in another way, I mean if the user hovers the image element (or clicked) I wanted the related menu Item set as 'active'.
how we can implement it that when user hover some part of images the menu item set active without map area tags?
$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).hide();
});
.visualizer > img{
position: absolute;
}
.visualizer > .hover-layer{
z-index: 1000;
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Categories</a>
</div>
<ul class="nav navbar-nav">
<li class="selector" ><a href="#" class="all" >All</a></li>
<li class="selector"><a href="#" class="intercom" >interom</a></li>
<li class="selector">powerpoint</li>
</ul>
</div>
</nav>
<h2 class="h2" >Sample Visualizer By Yusef</h2>
<div class="visualizer">
<img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
<img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
<img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
</div>
</div>

You can achieve the required functionality by adding custom position CSS. I just update your code snippet, I hope it'll help you out. Thanks
jQuery
$('.image-overlay').hover(function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').show();
},function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').hide();
});
CSS
#powerpoint-hover-container {
position: absolute;
left: 430px;
top: 271px;
width: 38px;
height: 29px;
z-index: 1001;
}
#intercom-hover-container {
position: absolute;
right: 366px;
top: 270px;
width: 20px;
height: 13px;
z-index: 1001;
}
HTML
<div id="intercom-hover-container" class="image-overlay">
<span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
<span class="powerpoint"></span>
</div>
$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
$('.visualizer > .'+ classItem).hide();
});
$('.image-overlay').hover(function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').show();
},function() {
var overlayClass = '.' + $(this).children().attr('class');
$(overlayClass + '.hover-layer').hide();
});
.visualizer {
position: relative;
}
.visualizer > img{
position: absolute;
}
.visualizer > .hover-layer{
z-index: 1000;
display:none;
}
#powerpoint-hover-container {
position: absolute;
left: 430px;
top: 271px;
width: 38px;
height: 29px;
z-index: 1001;
}
#intercom-hover-container {
position: absolute;
right: 366px;
top: 270px;
width: 20px;
height: 13px;
z-index: 1001;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Categories</a>
</div>
<ul class="nav navbar-nav">
<li class="selector"><a href="#" class="all" >All</a></li>
<li class="selector">interom</li>
<li class="selector">powerpoint</li>
</ul>
</div>
</nav>
<h2 class="h2" >Sample Visualizer By Yusef</h2>
<div class="visualizer">
<div id="intercom-hover-container" class="image-overlay">
<span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
<span class="powerpoint"></span>
</div>
<img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
<img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
<img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
</div>
</div>

How can I display the thumbnail image and open modal on click using JavaScript

I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?

Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>

Get different hidden value containing same class via jquery

I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.

Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>

Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});

Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have

Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});