JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>

    <li>Fourth</li>
    <li>Fifth</li>
  </ul>
  <ul id="results">

 </ul>

CSS

body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }

JavaScript

var mappedItems = $("li").map(function (index) {

  var replacement = $("<li>").text($(this).text()).get(0);

  if (index == 0) {
    /* make the first item all caps */
    $(replacement).text($(replacement).text().toUpperCase());
  } else if (index == 1 || index == 3) {
    /* delete the second and fourth items */
    replacement = null;
  } else if (index == 2) {
    /* make two of the third item and add some text */
      console.log(replacement);  
      console.log($("<li>").get(0));
    replacement = [replacement,$("<li>").get(0)];
    $(replacement[0]).append("<b> - A</b>");
    $(replacement[1]).append("Extra <b> - B</b>");
  }

  /* replacement will be a dom element, null, 
     or an array of dom elements */
  return replacement;
});
$("#results").append(mappedItems);