title: How can I append multiple li after first li using jquery?
body: <p>I have the following JSON array, in which you can see each activity array has a child array.</p>
  <pre><code>{
     &quot;status&quot;:true,
     &quot;activities_array&quot;:[
        {
           &quot;app&quot;:&quot;app name 1&quot;,
           &quot;country&quot;:&quot;Tunisia&quot;,
           &quot;count&quot;:10,
           &quot;child_activities&quot;:[
              {
                 &quot;username&quot;:&quot;user name 23&quot;,
                 &quot;user_id&quot;:123,
              },
              {
                 &quot;username&quot;:&quot;user name 23&quot;,
                 &quot;user_id&quot;:324,
              }
           ]
        },
        {
           &quot;app&quot;:&quot;app name 2&quot;,
           &quot;country&quot;:&quot;United Arab Emirates&quot;,
           &quot;count&quot;:6,
           &quot;child_activities&quot;:[
              {
                 &quot;username&quot;:&quot;user name 1l2&quot;,
                 &quot;user_id&quot;:223,
              },
              {
                 &quot;username&quot;:&quot;user name 13&quot;,
                 &quot;user_id&quot;:1212,
              }
           ]
        }
     ]
  }
  </code></pre>
  <p>I am trying following, but not getting correct html</p>
  <pre><code>response.activities_array.forEach((activities) =&gt; {
      $('#winner-list-by-countries').append(activities.map(activity =&gt; {
          return `&lt;ul id=&quot;winners-list&quot; class=&quot;list-group&quot;&gt;
                      &lt;li class=&quot;list-group-item active&quot;&gt;${activities.app} - ${activities.country}&lt;span class=&quot;badge badge-primary badge-pill&quot;&gt;{{ $activity['count'] }}&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;list-group-item OE-background-color&quot;&gt;
                          &lt;span class=&quot;text-style&quot;&gt;Rank # ${activity.index} &lt;/span&gt;&lt;br /&gt;
                          &lt;span class=&quot;text-style&quot;&gt;Name: ${activity.username} &lt;/span&gt;&lt;br /&gt; 
                          &lt;span class=&quot;text-style&quot;&gt;UserId: ${activity.user_id} &lt;/span&gt;&lt;br /&gt;
                      &lt;/li&gt;
              &lt;/ul&gt;`;
      }));
  });
  </code></pre>
  <p>I want to append all li after appending the first li, as you can see first has a <code>list-group-item active</code> class. Can someone kindly guide me about it? I would be thankful.</p>