Append list element in row with specific id

I have a list of rows with specific ids:

<li *ngFor="let app of Apps; let i = index> 
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>

and a list of messages in the form of buttons:

<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}"  >

    <button type="button" id = "btn{{i}}">Message</button>
    <div id="message{{i}}" class="modal">

      <div class="modal-content">
        <span id="close{{i}}" class='close'>&times;</span>

  <br> <br>

I have a another array that contains the name of the apps these messages come from. I want to append the messages (buttons) in the row who’s id matches the name of the app like this:
enter image description here

I am a beginner to html/css/javascript/angular so any kind of pointers and guidance will be helpful!

50 thoughts on “Append list element in row with specific id”