JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fatura_manual" class="col-lg-12">
<div class="row box-faturas">
<div id="fatura_1" class="tamanho-box-fatura">
<div class="panel panel-default panel-fatura">
<div class="panel-heading">
<div class="alinhamento">
<span class="negrito">Nº Título:</span>
<span class="numero_duplicata"> 56674-1</span>
</div>
<div class="alinhamento">
<span class="negrito">Vencimento:</span>
<span class="data_vencimento"> 19/05/2015</span>
</div>
<div class="alinhamento">
<span class="negrito">Valor R$:</span>
<span class="valor_duplicata"> 100,0</span>
</div>
</div>
</div>
<button class="btn btn-danger btn-block" onclick="remover_fatura(this);" type="button">
<span class="glyphicon glyphicon-remove"></span>
Remover
</button>
</div>
<div id="fatura_2" class="tamanho-box-fatura">
<div class="panel panel-default panel-fatura">
<div class="panel-heading">
<div class="alinhamento">
<span class="negrito">Nº Título:</span>
<span class="numero_duplicata"> 56674-1</span>
</div>
<div class="alinhamento">
<span class="negrito">Vencimento:</span>
<span class="data_vencimento"> 16/06/2015</span>
</div>
<div class="alinhamento">
<span class="negrito">Valor R$:</span>
<span class="valor_duplicata"> 99,90</span>
</div>
</div>
</div>
<button class="btn...
CSS
.col-lg-12 {
width: 100%;
}
.box-faturas {
display: table;
}
.box-faturas > #fatura_1:first-child {
margin-left: 0 !important;
margin-right: 0;
}
.tamanho-box-fatura {
float: left;
margin-left: 15px;
width: 209px;
}
.panel-fatura {
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.panel-default {
border-color: #ddd;
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.panel-heading {
background-color: #f5f5f5;
border-color: #ddd;
color: #333;
}
.panel-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 10px 15px;
}
.btn-block {
border-radius: 0 0 4px 4px !important;
margin-top: -2px !important;
}
.btn-block {
display: block;
width: 100%;
}
.btn-danger {
background-color: #d9534f;
border-color: #d43f3a;
color: #fff;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.btn-primary {
background-color: #337ab7;
border-color: #2e6da4;
color: #fff;
}
JavaScript
$(document).ready(function(){
$(".enviar").on('click', function(){
//Gera os dados das duplicatas.
var dadosDuplicatas = {};
$("#fatura_manual .box-faturas .tamanho-box-fatura").each(function(){
var self = $(this);
dadosDuplicatas[self.attr('id')] = {
numero_duplicata : self.find('.numero_duplicata').text(),
data_vencimento : self.find('.data_vencimento').text(),
valor_duplicata : self.find('.valor_duplicata').text()
};
});
console.log(dadosDuplicatas);
});
});