JSFiddle - React, Tailwind, and code Playground

by cedric_tarou

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container mt-3" id="main-container">

<form action="" class="form-inline">
  <div class="form-group mr-2">
    <label for="">列の数:</label>
    <input type="number" class="form-control" id="col-num" value="5">    
  </div>
  <buttom class="btn btn-primary" id="add-row-btn">Add Row</buttom>
</form>



  <div class="row text-center">
   
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 5px;
}

.col {
  border: solid 1px #6c757d;
  margin-right: 5px;
}

JavaScript

const mainContainer = document.getElementById('main-container');
const addRowBtn = document.getElementById('add-row-btn');
let genderBoy = true;
let seatNum = 0;


addRowBtn.addEventListener('click', () => {
  const colNum = document.getElementById('col-num').value;
  const divRow = document.createElement('div');
  

  // make Row
  divRow.classList.add('row', 'text-center');
  mainContainer.appendChild(divRow);
  
  // make Col
  for (let i = 0; i <= colNum -1; i++) {
    const divCol = document.createElement('div');
    
    divCol.classList.add('col');
    divRow.appendChild(divCol);  
    
    //make btn
    const btn = document.createElement('buttom');
    seatNum ++;
    btn.textContent = `boy${seatNum}`;
    btn.classList.add('btn', 'btn-primary');
    divCol.appendChild(btn);
	
  	  //クリックすると性別を変える処理
		
   btn.addEventListener('click', () => {
     if(genderBoy) {
       btn.textContent = `girl${seatNum}`;
       btn.classList.add('btn-danger');   
     } else {
       btn.textContent = `boy${seatNum}`;
       btn.classList.remove('btn-danger');
       btn.classList.add('btn-primary');
       
     }
   });
    
  }
  
  
  
  
});