I need to populate an input field and a summernote altogether, but showing different text on the input and on the summernote.

I was able to do the population using jQuery and assigning a specific function to different button links, so for example BTNLINK-1 will show text AAA in SUBJECT and AABB in the Summernote field, BTNLINK-2 will show text BBB in SUBJECT and BBCC in the Summernote and so on. Below is a sample code how I did that:

```
<div class="form-group">
<label for="name">Template</label><br>
<a class="btn btn-default" id="btn1">Template1</a>
<a class="btn btn-danger" id="btn2">Template2</a>

```

```
<div class="form-group">
<label for="subject">SUBJECT:</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Write your subject" required/>

```

```
<div class="form-group">
    <label for="message">Message:</label>
    <textarea class="input-block-level summernote-modal"  id="textfield" name="message"></textarea>
</div>

```

The jQuery code:

```
$(document).ready(function(){
$("#btn1").click(function(){
    $("#subject").val("AAA");
    $(".summernote-modal").summernote('code', '<p>AABB</p>');
});
$("#btn2").click(function(){
    $("#subject").val("BBB");
    $(".summernote-modal").summernote('code', '<p>BBCC</p>');
});
}

```

Now the buttons have become 8 and we're planning to add more, so this solution takes a lot of space in the form.
Can you please help me to convert from links to a dropdown list, so when I select an item from the list, it will automatically update the input field and the Summernote field?

I tried already some options available on Stackoverflow where I could populate the value of input field but not Summernote field which remained always blank.

I understand that I should add some variables for each case on select of dropdown, I'm just stuck...

Thanks