JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="product-container">
    
<h3 id="title-1">Product 1</h3>

    <button id="btn-1">btn-1</button>
</div>
<div class="product-container">
     <h3 id="title-2">Product 2</h3>

    <button id="btn-2">btn-2</button>
</div>
<div class="product-container">
     <h3 id="title-3">Product 3</h3>

    <button id="btn-3">btn-3</button>
</div>
<div class="product-detail">
    <h4>Selected Product</h4>
    <input id="product" />
</div>

CSS

.product-container {
    border: 1px solid lightgrey;
    margin-left: 18px;
    margin-right: 18px;
    padding: 8px 8px 8px 8px;
}

.product-detail {
    border: 1px solid lightgrey;
    margin-top: 22px;
    margin-left: 18px;
    margin-right: 18px;
    padding: 0px 8px 8px 8px;
}

JavaScript

$("button[id^=btn-]").click(function (e) {
        var num = this.id.replace(/\D/g, '');
        var name = $("#title-" + num).html();
        $("#product").val(name);
        //$("#the_popup, #overlay_pop").fadeIn(500);
        //$("html, body").animate({ scrollTop: 0 }, 400);
        e.preventDefault()
    });