Eingabemenge zum übergeordneten Element hinzufügen und auf neues Element setzen

Question

Ich versuche, Funktionalität zu erstellen, um die Summe eines Div-Texts und einer Benutzereingabe zu erhalten und in einem neuen Bereich anzuzeigen. Ich kann nicht scheinen, die Struktur herauszufinden, um das mit einer foreach für jede Eingabe mit der gleichen Klasse zu arbeiten.

$('#go').on('click', function(){ 
 
\t 
 
    $('.adjust').each(function(){ 
 
    
 
    var sum = 0; 
 
    var cost = $(this).parents().eq(0).find('.cost').data('total'); 
 
    var adjust = parseInt($(this).val(), 10) || 0; 
 
    
 
    $(this.parents().eq(1).find('.total').text(cost - adjust)) 
 

 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<br/><br/> 
 
<input type='button' id='go' value='Go'>

Answer 1

$('#go').on('click', function(){ 
 
\t 
 
    $('.adjust').each(function(){ 
 
    
 
    var sum = 0; 
 
    var cost = $(this).parents().eq(0).find('.cost').data('total'); 
 
    var adjust = parseInt($(this).val(), 10) || 0; 
 
    
 
    $(this).find('.total').text(cost - adjust)) 
 

 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<span data-total='100' class='cost'>100</span> + 
 
<input class='adjust'> = 
 
<span class='total'>0</span> 
 
<br/> 
 
<br/><br/> 
 
<input type='button' id='go' value='Go'>