JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul id="car-list">
    <li>      
        <span class="car-title">Amarok</span>
        <button class="buy-car">Comprar</button>
    </li>
    <li>
        <span class="car-title">Celta</span>
        <button class="buy-car">Comprar</button>
    </li>
    <li>
        <span class="car-title">Corolla</span>
        <button class="buy-car">Comprar</button>
    </li>
</ul>

<fieldset id="form">
    <input type="text" class="" id="car-name" placeholder="Nome do carro">
</fieldset>

CSS

*{
    box-sizing:border-box;
    font-family:sans-serif
}

ul{
    margin:10px 0 20px;    
    overflow:hidden
}

li{
    padding:15px;
    width:33.33%;
    border:1px solid;
    float:left;

}

span{
    display:block
}

input{
    padding:5px; 
}

JavaScript

$('#car-list li').each(function(){
	var button = $(this).find('.buy-car');
    var carTitle = $(this).find('.car-title').text();
    
    button.on('click', function(){
        $('#car-name').val(carTitle)
    });
})