JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>


<div class="tarefas col-md-12">
<div class="alertas col-md-12"> 
					<div class="row">
						<div class="tituloAlertas col-12 col-md-12">
							<h1 style="color:#333333" class="tituloSessao"> Plano de Trabalhos </h1> 
						</div>
           
<div class="col-md-12 row main_alertas">   
						<div class="col-md-12 blue">
							<div style="margin:0; padding:0" class="row"> 
								<div style="width:5%">
						
								</div>
								<div style="width:55.6%">

								</div>
								<div style="width:15%">
									<button style="margin-left: 5px;background: none; border: none; outline:none" href="#" class="pure-button sorte3"> Alterar</button>
									<button style="display:none; margin-left: 5px; background: none; border: none; outline:none" href="#" class="pure-button sorte4"> Alterar</button>	
								</div>						
							</div>	 
						</div> 
						<div class="col-md-12 sort-list todas-tarefas">
									<div data-prioridade="1" data-id="1" data-tempo="-1" class="ordem-trabalhos row">
										<div style="width:5%; padding-top:20px; padding-left: 5px;" class="conteudo">
											
										</div>
										
										<div style="width:56.6%;"...

CSS

.blue {
    height: 30px;
    background: #d0dbe5;
    padding-top: 10px;
    width: 100%;
}

JavaScript

$("#editTarefa1").on('click', (function(e) {
										alert("entrou editar 1");		
									}));
									
                  $("#editTarefa2").on('click', (function(e) {
										alert("entrou editar 2");		
									}));
              
              
              var rooms = $('.ordem-trabalhos');
							var roomList = $('.sort-list');
								
							$( ".sorte3" ).click(function() {
              	console.log("entrou");
								$(".sorte3").hide();
								$(".sorte4").show();
								sortAsc();
							});
									
							$( ".sorte4" ).click(function() {
								$(".sorte4").hide();
								$(".sorte3").show();
								sortDesc();
							});
									
							function sortAsc(){
								roomList.empty();
								rooms.sort(function(a, b){
									return $(a).data('tempo')-$(b).data('tempo')
								});
								roomList.append(rooms);
							}
									
							function sortDesc(){
								roomList.empty();
								rooms.sort(function(a, b){
									return $(b).data('tempo')-$(a).data('tempo')
								});
								roomList.append(rooms); 
							}