JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<div class="items"></div>

<button class="addItem">Add Item</button>

JavaScript

$(document.body).on('click', '.triggerIcon', function() {
  $(this).parents('.contentToggle').siblings().slideToggle('fast');
  $(".contentShow").not($(this).parents('.contentToggle').siblings()).slideUp('fast');
});

$(document.body).on('click', '.addItem', function() {
  $('<div class="item">\
    <div class="contentSlider">\
      <div class="contentToggle">\
        <div class="headerStyle">\
          <div class="col2 triggerIcon">ICON IMAGE</div>\
          <div class="col10">TEXT</div>\
        </div>\
      </div>\
      <div class="contentShow">\
        <p>Content...</p>\
      </div>\
    </div>\
  </div>').fadeIn(200).appendTo($(this).siblings('.items'));
});