JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<label>Select how many gap fights should a fighter have: </label>
<select name="gap" id="gapNumberInput">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4" selected>4</option>
</select>
<br>
<button onclick="calculatreFight()">Calculate</button>

<br><br><br>
<p> For this testing, i selected the "4" and then i calculated it</p>

My goal is to rearrange only the fight number and avoid getting NULL value. If it's not possible to rearrange because of the condition, then the fight number must remain

JavaScript

const data = [
{id: '1', fighter1: 'a', fighter2: 'oo', fightNumber: '1'},
{id: '2', fighter1: 'b', fighter2: 'i', fightNumber: '2'},
{id: '3', fighter1: 'c', fighter2: 'uu', fightNumber: '3'},
{id: '4', fighter1: 'uu', fighter2: 'cc', fightNumber: '4'},
{id: '5', fighter1: 'c', fighter2: 'u', fightNumber: '47'},
{id: '6', fighter1: 'c', fighter2: 'vv', fightNumber: '83'},
{id: '7', fighter1: 'd', fighter2: 'c', fightNumber: '5'},
{id: '8', fighter1: 'e', fighter2: 'joker', fightNumber: '6'},
{id: '9', fighter1: 'f', fighter2: 'c', fightNumber: '7'},
{id: '10', fighter1: 'e', fighter2: 'bb', fightNumber: '49'},
{id: '11', fighter1: 'g', fighter2: 'ss', fightNumber: '8'},
{id: '12', fighter1: 'f', fighter2: 'pp', fightNumber: '50'},
{id: '13', fighter1: 'h', fighter2: 'f', fightNumber: '9'},
{id: '14', fighter1: 'i', fighter2: 'uu', fightNumber: '10'},
{id: '15', fighter1: 'e', fighter2: 'j', fightNumber: '85'},
{id: '16', fighter1: 'g', fighter2: 'q', fightNumber: '51'},
{id: '17', fighter1: 'h', fighter2: 'ff', fightNumber: '52'},
{id: '18', fighter1: 'j', fighter2: 's', fightNumber: '11'},
{id: '19', fighter1: 'k', fighter2: 'oo', fightNumber: '12'},
{id: '20', fighter1: 'L', fighter2: 'm', fightNumber: '13'},
{id: '21', fighter1: 'm', fighter2: 'cc', fightNumber: '14'},
{id: '22', fighter1: 'f', fighter2: 'qq', fightNumber: '86'},
{id: '23', fighter1: 'm', fighter2: 'dd', fightNumber: '57'},
{id: '24', fighter1: 'n', fighter2: 'dd', fightNumber: '24'},
{id: '25', fighter1: 'o', fighter2: 'dd', fightNumber: '16'},
{id: '26', fighter1: 'p', fighter2: 'tt', fightNumber: '17'},
{id: '27', fighter1: 'q', fighter2: 'nn', fightNumber: '18'},
{id: '28', fighter1: 'r', fighter2: 'cc', fightNumber: '19'},
{id: '29', fighter1: 'b', fighter2: 'm', fightNumber: '46'},
{id: '30', fighter1: 'c', fighter2: 'i', fightNumber: '110'},
{id: '31', fighter1: 's', fighter2: 'uu', fightNumber: '20'},
{id: '32', fighter1: 't', fighter2: 'tt', fightNumber: '21'},
{id: '33', fighter1:...