I am finding an image box: preview and small preview list under the preview.
The html is as follow :
<!--image list-->
<div class="image-list-container d-flex">
<div class="image-list-item cursor-pointer image-highlight">
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://5.imimg.com/data5/NR/TP/MY-9295383/hcl-desktop-500x500.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://tiimg.tistatic.com/fp/1/007/341/shock-proof-black-color-medium-size-acer-desktop-computer--825.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://cdn.britannica.com/97/155497-050-4C5BFFFC/laptop-computer.jpg" alt="" /></div>
</div>
</div>
<!---->
<div class="image-list-item cursor-pointer add-image-section add-download-img p-0">
<div id="ember519" class="dropdown btn-group h-100">
<button class="btn file-upload add-download-img-btn" type="button">
<input id="add-images-btn" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon align-text-top action-icons icon-xlg fill-dropdown-blue">
<path d="M256 15C122.9 15 15 122.9 15 256s107.9 241 241 241 241-107.9 241-241S389.1 15 256 15zm122 263H278v100c0 12.2-9.8 22-22 22s-22-9.8-22-22V278H134c-12.2 0-22-9.8-22-22s9.8-22 22-22h100V134c0-12.2 9.8-22 22-22s22 9.8 22 22v100h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
<path fill="#FFF" d="M378 234H278V134c0-12.2-9.8-22-22-22s-22 9.8-22 22v100H134c-12.2 0-22 9.8-22 22s9.8 22 22 22h100v100c0 12.2 9.8 22 22 22s22-9.8 22-22V278h100c12.2 0 22-9.8 22-22s-9.8-22-22-22z"></path>
</svg>
</button>
<button id="ember521" class="dropdown-toggle btn btn-secondary rounded-start-0 add-download-img-btn no-border" type="button"></button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item file-upload">
<input id="ember522" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
Add More Images
</button>
<button class="dropdown-item" data-ember-action="" data-ember-action-523="523">Download As ZIP</button>
</div>
</div>
</div>
</div>
<!--/-->
I am still learning js in how to have the scenario, when each item list is clicked it will previewed in the box above. as well when the primary text is clicked.
the code is here text
Thank you for you help.