JSFiddle - React, Tailwind, and code Playground

JavaScript

var xml = "<?xml version='1.0'?><stories><story>story1</story><story>story2</story><story>story3</story><story>story4</story><story>story5</story><story>story6</story></stories>";

var xml_parse = $.parseXML(xml);
var $xml = $(xml_parse);

var html2 = [];
var html3 = [];

$("body").append("<div id='contentslider' class='row content-slider minor-section slick-initialized slick-slider'></div>");

$xml.find("story").each(function() {
  var i = $xml.find("story").index(this);
var html1 = [];
  if (i < 2) {
    html1.push("<div class='medium-6 columns'><div class='panel half-background' data-equalizer-watch='true'><p style='color: red'>" + $(this).text() + "</p></div></div>");
  } else if (i < 4) {
    html2.push("<div class='medium-6 columns'><div class='panel half-background' data-equalizer-watch='true'><p style='color: blue'>" + $(this).text() + "</p></div></div>");
  } else if (i < 6) {
    html3.push("<div class='medium-6 columns'><div class='panel half-background' data-equalizer-watch='true'><p style='color: red'>" + $(this).text() + "</p></div></div>");
  }
  
});

$("#contentslider").append(html1.join(''));