JSFiddle - React, Tailwind, and code Playground

HTML

<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div>
        <div data-template="PaxPreferenceTemplate"  data-bind="source: ApisVMList.PaxPreferenceBySegment"></div>
        

        <div style="text-align:center;">
            <button type="button" id="btnIssueTicket" data-bind="click: SaveApis" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">
                <i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save
            </button>

            <button type="button" class="k-button " data-bind="click: CloseApisWindow" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>
            <button type="button" class="k-button " data-bind="click: SkipApisWindow" style="width: 100px; height: 25px;"> Skip <i class="fa fa-chevron-right"></i></button>
        </div>
    </div>
</script>


<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div>
        <div data-template="PaxPreferenceTemplateSegment" data-bind="source: Segment"></div>

        <div id="ApisBody" data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>
    </div>
</script>

<script id="PaxPreferenceTemplateSegment" type="text/x-kendo-template" class="KendoExtTemplate">
    <div> <b data-bind="text: Segment.SegmentDetailsToDisplayPricing"></b> </div>
</script>

<script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div class="ApisDropdowndiv">
            <label class="span3 Apis0margin" data-bind="text: Pax.PersonName" ></label>
            
                <input  data-role="dropdownlist"
                       id="FrequentFlyer" 
                       data-text-field="FrequentFlyernumber"
                       data-value-field="FrequentFlyernumberID"
                       data-bind="value: FrequentFlyer,
                        source: PossibleFrequentFlyers,
                      ...

JavaScript

// JSON Object

"{"ID":0,"PNR":null,"type":"PNR","PaxPreferenceBySegment":[{"Segment":{"FareBasis":null,"MiniRuleXML":null,"FullRuleXML":null,"NewClass":[],"lkpStatus":null,"ArriveDepartDetails":{"DepartureDate":"101117","ArrivalDate":"111117","ArrivalTime":"0035","TimeType":null,"DepartureTime":"2235","NumberOfStops":null,"Origin":"BOM","ViaAirports":[],"via":[],"Destination":"MAA","ArrivalTerminal":null,"DepartureTerminal":null,"WeekDayNumber":null,"DepartureTimeToDisplay":"22:35","DepartureDateToDisplay":"10Nov17","ArrivalTimeToDisplay":"00:35","ArrivalDateTime":"/Date(-62135596800000)/","DepartureDateTime":"/Date(-62135596800000)/"},"ID":4269,"Note":null,"CabinClass":"Y","NewCabinClass":null,"ClassDescription":null,"ClassCodeId":null,"Alliance":null,"isFlown":false,"PCCInfo":{"BookingPccId":0,"BookingPCCCode":null,"CurrencyCode":null,"PricingPccId":null,"PricingPCCCode":null},"BookingOfficeID":1,"BookingOfficeCode":"SINCG2100","ValidatingCarrierCode":null,"FlightNumber":"7013","FlightDuration":null,"MarketingCompanyCode":"9W","OperatingCompanyCode":null,"AirlinesFilter":[],"AirlineIds":[],"OperatingCompany":{"AirlineID":"9W.1","airline_value":"9W","airline_name":null,"airline_text":null},"ValidatingCompany":{"AirlineID":null,"airline_value":null,"airline_name":null,"airline_text":null},"MarketingCompany":{"AirlineID":"9W.1","airline_value":"9W","airline_name":null,"airline_text":null},"SortOrder":1,"SegmentNumber":null,"isSelectedToPrice":true,"Connected":3,"ReservationRequestItemID":56810,"ReservationRequestID":30807,"OfficePNRTSTID":0,"TstReferenceNumber":null,"Equipment":null,"Quantity":"0","AirlineLocator":null,"Status":"HK","TypeDetail":null,"ChangeOfEquipment":false,"OfficePNRID":null,"Qualifier":null,"SegmentName":null,"LineNumber":null,"SegmentDetailsToDisplay":"9W 7013 Y 10Nov17  BOM MAA HK0 22:35 00:35 111117   ","SegmentDetailsToDisplayPricing":"9W 7013 10Nov17 BOM...