JSFiddle - React, Tailwind, and code Playground

by sushanth009

HTML

<div class="ab">
    <ul>
        <li data-key="name">Sahar Raj</li>
        <li data-key="address">Address.</li>
        <li data-key="city">City</li>
        <li data-key="state">State2</li>
        <li data-key="pin">Pin</li>
        <li data-key="phone">9876543210</li>
    </ul>
</div>
<div class="container">
    <input class="required" type="text" name="name" />
    <textarea name="address" class="required"></textarea>
    <input class="required" type="text" name="city" />
    <select name="state">
        <option value="0">State1</option>
        <option value="1">State2</option>
    </select>
    <input class="required" type="text" name="pin" />
    <input class="required" type="text" name="phone" />
</div>

JavaScript

$(function () {
    $('div.ab').click(function () {
        $('.container').children().each(function() {
             // Get the corresponding key value from li.
             var $this =  $(this),
                 key = $this.attr('name');
             // Find the li with that key
            var txt = $('.ab li[data-key="'+ key +'"]').text();
            
            $this.val(txt);
        });
    });
});