JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<div class="addons-container">
  <div class="tab-content">
    <div>
      <div class="tab-row">
        <div class="tab-addons-passenger">
          <div class="tabs-col mobile-passenger-details">
            <div class="mobile-passenger-name">Ambi Tews</div>
          </div>
          <div class="tabs-col">
            <div class="addons-fixed-height"><span>
                                <div class="option-wrap myPage-promise" style="opacity: 1; display: table;">
                                    <div class="closebtn-wrap">
                                        <div class="closebtn"><span class="icon-times-circle" aria-hidden="true"></span></div>
          </div>
          <div class="mobile-option-box">
            <div class="icon"><i class="fa icon-check"></i></div>
            <div class="item"><span>₹&nbsp;49</span></div>
            <div class="item">myPage Promise</div>
          </div>
        </div>
        </span><span></span></div>
    </div>
    <div class="tabs-col">
      <div class="addons-fixed-height"><span>
                                <div class="food" style="display: block; opacity: 1;">
                                    <div class="option-wrap food">
                                        <div class="closebtn-wrap">
                                            <div class="closebtn"><span class="icon-times-circle" aria-hidden="true"></span></div>
    </div>
    <div class="mobile-option-box">
      <div>
        <div class="icon"><i class="fa icon-check"></i></div>
        <div class="item"><span>₹&nbsp;0</span></div>
        <div class="item">IndiCombo</div>
      </div>
    </div>
  </div>
</div>
</span><span></span></div>
</div>
<div class="tabs-col">
  <div class="addons-fixed-height"><span></span><span>
                                <div class="option-wrap food-select" style="opacity: 1; display: table;">
                                    <div class="select-box"><input type="checkbox" class="bag-check" name="baggage"...

JavaScript

function mealLoad() {
  var delayLoad = setInterval(function() {

    if ($(".tab-addons-passenger").length == 2) {
      if ($(".tab-addons-passenger.sub-menu.meals").length > 0) {
        div1 = $(".slick-track div[data-index='0']");
        div2 = $(".slick-track div[data-index='6']");
        tdiv1 = div1.clone();
        tdiv2 = div2.clone();
        div1.replaceWith(tdiv2);
        div2.replaceWith(tdiv1);
        $(".slick-track div[data-index='0']").removeClass("slick-active");
        $(".slick-track div[data-index='0']").removeClass("slick-current");
        $(".slick-track div[data-index='6']").addClass("slick-active");
        $(".slick-track div[data-index='6']").addClass("slick-current");

        $(".slick-track div[data-index='6']").on("click", function() {
          $('.slick-track div[data-index="6"] > div > .tabs-col.has-option > label > .option-wrap.food-select.veg > .select-box').remove();
          $('.slick-track div[data-index="6"] > div > .tabs-col.has-option > label > .option-wrap.food-select.veg').append('<div class="mobile-option-box"><div class="icon"><i class="fa icon-check"></i></div><div class="item"><div class="currency"><span>₹&nbsp;250</span></div></div><div class="item meal-txt">Dal Chawal Combo </div><div class="item veg-non-veg"><img src="/etc/designs/myPage-reservation/clientlibs-react/images/vector-icons/veg-symbol.svg" width="12px" alt=""><!-- react-text: 1827 --> Veg<!-- /react-text --></div></div>');
        });
      }
      clearInterval(delayLoad);
    }
  }, 1000);
};


mealLoad();