Unable To Autofill Textarea Based On Selected Datalist Option

I want to autofill Address of the client in textarea based on input of client name in input field. I made a 'for loop' to get datalist of the clients name. And for address i fetch

Solution 1:

You can simply use the .val() method to add data to the textarea. Something like the below :-

$(function() {
    
  let textForTextArea = '';
  
    $('#ice-cream-choice').on('change', (e) => {
    e.preventDefault()
    textForTextArea = `${textForTextArea} ${e.target.value}`
    $('#all-that-is-selected').val(textForTextArea)
  })
  
})

label , input {
  display : block;
  margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

<textarea name="" id="all-that-is-selected" cols="30" rows="10"></textarea>