JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="expandable-panel" id="cp-1">
        <div class="expandable-panel-heading">
             <h2><span id="expanderSign" class="arrow up"></span> Try Advance Application Finder <span class="beta">(BETA)</span></h2>

        </div>
        <div class="expandable-panel-content">
            <form name="myForm" id="myForm" method="post">	<span class="error-msg" style="display:none;">Select a category</span>

                <div class="content-container">
                    <table id="search-table" cellspacing="0" cellpadding="0" border="0">
                        <input type="hidden" id="hidd" value="1" />
                        <tbody>
                            <tr>
                                <td>
                                    <select name="category_01" id="category_01" size="1"></select>
                                </td>
                                <td valign="top">
                                    <input type="text" id="tokenfield_01" name="tokenfield_01" />
                                </td>
                                <td valign="top" style="border:1px solid red;"><a id="firstRow" class="signs addRow"></a>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="take-action">	<span class="btn-link"><a href="javascript:void(0);">Clear Filters</a></span>

                    <span class="btn btn-blue"><strong class="blue"><button type="submit" class="apply-btn"></button>APPLY</strong></span>	<!--<span class="btn btn-blue"><input type="submit" class="apply-btn" /></span>-->

                </div>
            </form>
        </div>
    </div>
</div>

CSS

body {
    font:12px/16px'Arial', Helvetica, sans-serif
}
body a {
    color:#0767c9;
    text-decoration:none;
    font-size: 11px;
}
body a:hover {
    text-decoration:underline;
}
h2, p {
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
}
hr {
    border:none;
    height:1px;
    border-top:1px dashed #999;
}
#container {
    width:720px;
    margin:auto;
}
.expandable-panel {
    overflow:auto;
    border:3px solid #ffba00;
    background:#f2f6f9;
}
/*
.expandable-panel-heading {
cursor:pointer;
position:relative;
}
*/
 .expandable-panel-heading h2 {
    background: #ffbb00;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffba00), to(#ffa200));
    background: -webkit-linear-gradient(top, #ffba00, #ffa200);
    background: -moz-linear-gradient(top, #ffba00, #ffa200);
    background: -ms-linear-gradient(top, #ffba00, #ffa200);
    background: -o-linear-gradient(top, #ffba00, #ffa200);
    font-size:14px;
    color: #005aba;
    line-height:20px;
    position: relative;
    padding:5px 0 5px 10px;
    cursor: pointer;
}
.expandable-panel-heading h2 .beta {
    color: #fae098;
}
.expandable-panel-heading .up {
    background: url('../images/arrows.png') no-repeat 0 -6px;
}
.expandable-panel-heading .arrow {
    width: 8px;
    height: 8px;
    text-indent: -9999em;
    display: inline-block;
}
.expandable-panel-heading .down {
    background: url('../images/arrows.png') no-repeat 0 2px;
}
.expandable-panel-content {
    background-color:#f2f5f7;
    padding:10px;
}
.expandable-panel-content p {
    padding:4px 0 6px;
}
.expandable-panel-content p:first-child {
    padding-top:10px;
}
.expandable-panel-content p:last-child {
    padding-bottom:15px;
}
.icon-up-down-arrow {
    width:20px;
    height:20px;
    position:absolute;
    background-image:url(../images/icon-up-down-arrow.png);
    right:15px;
}
select {
    font-size: 100%;
    padding:2px;
    width: 160px;
  ...

JavaScript

var data = {"DATA":[{"COUNTRYCODE":"1","DESCRIPTION":"USA","COUNTRYID":"211"},{"COUNTRYCODE":"1","DESCRIPTION":"Canada","COUNTRYID":"37"},{"COUNTRYCODE":"1","DESCRIPTION":"Dominican Republic","COUNTRYID":"224"}]};
var tid="";

function bindOptions(){
      $("#"+tid).append(
          data.DATA.map(function (el, i) {
              return $('<option>')
                  .val(el.COUNTRYID)
                  .text(el.DESCRIPTION)
                  .data('DATA', el); // just in case you also want to access COUNTRYCODE
          })
      );  
}
function loadlist(selobj,url){
    $(selobj).empty(); 
			$(selobj).append(
          data.DATA.map(function (el, i) {
              return $('<option>')
                  .val(el.COUNTRYID)
                  .text(el.DESCRIPTION)
                  .data('DATA', el); // just in case you also want to access COUNTRYCODE
          })
      );   
}
$(function(){
	loadlist($('select#category_01').get(0), data);
	//slide Toggle
	$('.expandable-panel-heading').click(function(){
		$('.expandable-panel-content').slideToggle();
		$("#expanderSign").toggleClass("up down");
	});
	
	//creating row
	var $lastChar = 1, $newRow;
	$get_lastID = function(){
		var $id = $('#search-table tr:last-child td:first-child select').attr("id");
		$lastChar = parseInt($id.substr($id.length - 2), 10);
		console.log('GET id: ' + $lastChar + ' | $id :'+$id);
		$lastChar = $lastChar + 1;
		if($lastChar <= 7){
		$newRow = "<tr id='tr_0"+$lastChar+"'> \
<td><select id='category_0"+$lastChar+"' size='1'></select></td> \ <td valign='top'><input type='text' id='tokenfield_0"+$lastChar+"' name='tokenfield_0"+$lastChar+"' maxlength='255' /></td> \ <td valign='top' style='border:1px solid red;'><a id='icon_0"+$lastChar+"' class='signs addRow'></a></td> \ </tr>";
                    tid= 'category_0'+$lastChar;

            
		}else {
			$newRow = "<tr id='tr_0"+$lastChar+"'> \
					<td><select id='category_0"+$lastChar+"' size='1'></select></td> \ <td...