JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example yui3-skin-sam"> <!-- You need this skin class -->

    <div id="simple"><input type="button" value="ADD" id="addBtn" class="yui3-skin-sam" /></div>
    <div id="simple"><input type="button" value="DELETE" id="deleteBtn" class="yui3-skin-sam" /></div>
    <div id="simple2"><select id='test'>
                          <option value="volvo">Volvo</option>
                          <option value="saab">Saab</option>
                          <option value="mercedes">Mercedes</option>
                          <option value="audi">Audi</option>
                        </select></div>
    
    <div id="labels"></div>
</div>
<div id='test'></div>

CSS

.yui3-skin-sam #table .yui3-hide'{
      background-color: #900;
      color: #fff;
    }

JavaScript

var tempCountryCode = '';
YUI().use("datatable", function(Y) {

    // Data with less user friendly field names
    var data = [
        {
            noType   : "Office",
            countryCodeList : "a",
            phoneNo: "12345678"
        },
        {
            noType   : "Home",
            countryCodeList : "b",
            phoneNo: "23458770"
        },
        {
            noType   : "Phone",
            countryCodeList : "c",
            phoneNo: "86754265"
        }
    ];

    // Column definitions that use configured header labels, abbrs.
    // Use "key" to identify which data field has its content.
    var columnDef = [
       {key:"noType", label:"noType", sortable:true, width:"100em"},
			        {key:"countryCodeList", label:"countryCodeList", sortable:true, width:"400em", allowHTML: true, formatter:testFormatter},			        
			        {key:"phoneNo", label:"phoneNo", sortable:true, width:"100em", formatter:hideFormatter}
    ];

    var enquiryResultTable = new Y.DataTable.Base({
        columnset: columnDef,
        recordset   : data,
        summary: "Price sheet for inventory parts",
        caption: "These columns have labels and abbrs"
    }).render('#labels');
    
    Y.one('#addBtn').on('click', function(e) {
        addItem('a','c','d');
    });

	
		addItem = function(a,b,c) {
		  var o = {};

		  o.noType = a;
		  o.countryCodeList = b;
		  o.phoneNo = c;

		  data.push(o);
		  enquiryResultTable.set('recordset', data).render();
		  enquiryResultTable.render();
		};
    enquiryResultTable.delegate('change', testing, '.yui3-datatable-data tr');    
	function testing(e){
	
	   var records = enquiryResultTable.get("recordset");
		row    = e.currentTarget,
		id = row.get('id'),
		record = records.getRecord(id);
		var test = Y.Node.getDOMNode(e.currentTarget);
		var rowNum = Y.Node.getDOMNode(e.currentTarget).rowIndex;
		var dataItem = enquiryResultTable.get('recordset')._conf.data.value.records;
		alert("Original: " +...