JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<input type="button" value="Change Text" id="button1">
<table width="100%" height="30px">
  <tr>
    <td id="td1">
      <div id="div1">
        
      </div>
    </td>
    <td>
      <span class="fa fa-angle-right" id="span2">&nbsp;</span>
      <span id="span1">
        
      </span>
    </td>
  </tr>
</table>

CSS

#td1 {
  background-color: #ccc;
  width: 100%;
}
#span2 {
  display: inline !important;
}

JavaScript

function onClicked() {
	var val = $('#span1').text();
  console.log(val);
  if (val.length > 2) {
  	$('#span2').show();
  }
  else {
  	$('#span').hide();
  }
	$('#span1').text(val + 'x');
}
$('#button1').on('click', onClicked);
onClicked();