JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yandex.st/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="table table-bordered table-striped table-6">
				<tr class="success">
					<th>Тема</th>
					<th>Статус</th>
					<th>Затраченное время</th>
					<th>Действия</th>
				</tr>
				<tr >
					<td><a href="task.html">№123 очень сложная задачка</a></td>
					<td> В работе</td>
					<td></td>
					<td class="options">
						
						<button class="btn btn-success btn-finish btn-modal" data-target="#modal-finish" >Завершить</button>
						<button class="btn btn-warning btn-addTime btn-modal" data-target="#modal-addTime" >Запросить доп./время</button>
					</td>
				</tr>
    <!--здесь много других таких же строк-->
		</table>
 <!--здесь много других таких же таблиц-->

 <!--модальные окна-->
<div class="effeckt-wrap effeckt-modal-wrap" id="modal-finish"> 
	    <div class="effeckt-content effeckt-modal" >
	      <h3>Заголовок</h3>
	      <div class="effeckt-modal-content">
	        
	        <form class="formModal" action="">
	        	<label for="timeSpent">Введите число</label>
	        	<input id="timeSpent" name="timeSpent" type="text">
	        	<button id="modal-btn-finish" class="btn btn-success modal-btn-finish " >Есть!</button>
	        </form>
	      </div>
	    </div>
  	</div>
   	<div class="effeckt-wrap effeckt-modal-wrap" id="modal-addTime">
	    <div class="effeckt-content effeckt-modal" >
	      <h3>Заголовок</h3>
	      <div class="effeckt-modal-content">
	        <form class="formModal" action="">
				<label for="timeSpentBefore">Затрачено?</label>
	        	<input id="timeSpentBefore" name="timeSpentBefore" type="text">
	        	
	        	<button id="modal-btn-addTime" class="btn btn-warning modal-btn-finish ">Ещё!</button>
	        </form>
	      </div>
	    </div>
  	</div>

CSS

.change {
    opacity:1;
    visibility:hidden;
}
.effeckt-modal {
  background: white;
}

.effeckt-modal h3 {
  padding: 1rem;
  color: white;
  
}
#modal-finish  h3{
	background:#47a447;
}
#modal-addTime h3{
	background:#f0ad4e;
}
.effeckt-modal-content {
  padding: 1rem;
}

.effeckt-modal-overlay {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
}

.effeckt-positional-modal-wrap .effeckt-modal {
  padding: 10px;
  background: #cccccc;
}

.effeckt-positional-modal-wrap .effeckt-modal-content {
  background: white;
}

.effeckt-modal-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 320px;
  min-width: 320px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.effeckt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
}

JavaScript

/*Здесь должен быть большой и сложный скрипт который управляет модальными окнами и еще много чем*/
$('.btn-modal').click(function(){
    var idElem=$(this).data('target');
    $(idElem).height()?$(idElem).css({"opacity":"1", "visibility":"visible"}):$(idElem).css({"opacity":"0","visibility":"hidden"});
});

/*То что я пишу ниже, можно ли как-то с этим связать чтобы не трогать скрипт который показывает окна(выше)*/
$(".btn-finish, #modal-btn-finish, .formModal").bind("click select",function(e){
    e.preventDefault();
    var _tds = $(this).parent().parent().find('td');
	_tds.eq(1).html('Завершена');
	
    var _t = $("#timeSpent").val();
	
	if ( _t !=='')_tds.eq(4).html(_t);	
	
	
	$(this).parent().find(".btn-addTime").fadeOut(300);	
});