JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<ul class="bt-zones">
  <li class="bt-zone">
    <a href="#">Zone 1</a>
  </li>
  <li class="bt-zone">
    <a href="#">Zone 2</a>
  </li>
  <li class="bt-zone">
    <a href="#">Finals</a>
  </li>
</ul>

<div class="zone1" data-zone="1">
  <ul class="bt-zone-teams">
    <li class="bt-col bt-col1">
      <!-- <ul class="bt-zone-pair">
        <li class="bt-zone">
          <a href="javascript:void(0)">Team <span>A</span></a>
        </li>
        <li class="bt-zone">
          <a href="javascript:void(0)">Team <span>B</span></a>
        </li>
      </ul> -->
    </li>
    <li class="bt-col bt-col2"></li>
    <li class="bt-col bt-col3"></li>
  </ul>
  <div class="bt-submission">
    <a href="javascript:void(0)">Submit</a> 
  </div>
</div>

<div class="zone2 bt-hidden" data-zone="2">
  <ul class="bt-zone-teams">
    <li class="bt-col bt-col1">
      <!-- <ul class="bt-zone-pair">
        <li class="bt-zone">
          <a href="javascript:void(0)">Team <span>A</span></a>
        </li>
        <li class="bt-zone">
          <a href="javascript:void(0)">Team <span>B</span></a>
        </li>
      </ul> -->
    </li>
    <li class="bt-col bt-col2"></li>
    <li class="bt-col bt-col3"></li>
  </ul>
  <div class="bt-submission">
    <a href="javascript:void(0)">Submit</a> 
  </div>
</div>

CSS

body { font: 12px/20px Arial, Helvetica; }
ul,li { list-style-type: none; padding:0; margin:0; }
a, a:hover { text-decoration: none; color: #000; }

.bt-zones { background: #ccc; padding: 5px; text-align: center; width: 100%; overflow: hidden; clear: both; margin-bottom: 20px; }
.bt-zones > li { display: inline-block; text-align: center; padding: 5px 20px; }

.bt-zone-teams { overflow: hidden; clear: both; }
.bt-zone-teams .bt-col { float: left; width: 100px; margin-right: 30px; }
.bt-zone-pair { background: #ccc; padding: 5px; margin: 20px 0; width: 100%; }
.bt-zone:last-child a { margin-bottom:0;}
.bt-zone:first-child a { margin-top:0;}
.bt-zone a { display: block; background: #fff; padding: 5px 20px; margin: 5px 0;}
.bt-zone a.is-selected { background: #eee; }
.bt-zone a:hover { background: #eee; }
.bt-zone a:hover span { background: #1C94C6; }
.bt-zone a span { background: yellow; display: inline-block; padding: 0 2px; }

.bt-col2 > ul { margin: 45px 0 60px; }

.bt-submission a { display: block; padding: 5px 10px; border: 2px solid #ccc; text-align: center; width: 150px; margin: 0 auto; }

.bt-hidden { display: none; }

JavaScript

var btTeams = ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team F', 'Team G', 'Team H'],
	_html = "";

$.each(btTeams, function(intIndex, objValue) {
  // For odd values, add start tags.
  if ((intIndex + 1) % 2 !== 0) {
    _html += '<ul class="bt-zone-pair" data-team="team'+intIndex+'">';
  }

  // Add li for all cases
  _html += '<li class="bt-zone"><a href="javscript:void(0)">' + 
    objValue + "</a></li>";

  // Add end tag for even cases
  if ((intIndex + 1) % 2 === 0) {
    _html += "</ul>"
  }
});

// Append constructed HTML
$('.bt-col1').append(_html);

// bind click to team nodes
$('a','.bt-col1').on('click', function(event){
	event.preventDefault();
  
  // declarations
  var $col2 = $('.bt-col2'),
  		nodeId = $(this).parent().parent().attr('data-team');
  
  // find siblings & remove class is-selected
  var siblings = $(this).parent().parent('.bt-zone-pair').find('a');
	siblings.removeClass('is-selected');
  $(this).addClass('is-selected');
  
  // check if selected team or team pool already exist
  if($('#'+ nodeId).length > 0) {
  	updateSelectedNode($('#'+ nodeId), $(this).text());
  } else {
  	// get selected node
	  addSelectedNode($(this).text(), nodeId);	
  }
});

function updateSelectedNode(element, nodeText){
	$(element, '.bt-col2').find('a').text(nodeText);
}

function addSelectedNode(nodeText, elementId) {
	var data = "";
  data += '<ul id="'+ elementId +'"><li class="bt-zone"><a href="javscript:void(0)">'+ nodeText +'</a></li></ul>';
  $('.bt-col2').append(data);
}