При увеличении значения input number выделяются все checkbox'ы, Как сделать так, что каждому "number" соответствовал свой "checkbox"? Поскажите пожалуйста новичку.
html
<div class="dance-type">
<div class="wrap-exact">
Ballroom Standard
</div>
<div class="wrap-exact-check">
<div class="check-item">
<div class="check-item-wr">
<input type="checkbox" id="dancetype1" name="dancetype1" value="Slow Waltz">
<span>Slow Waltz </span>
</div>
<input type="number" id="quantity1" name="quantity1" placeholder="0" step="1" min="1" max="20">
</div>
<div class="check-item">
<div class="check-item-wr">
<input type="checkbox" id="dancetype2" name="dancetype2" value="Tango">
<span>Tango</span>
</div>
<input type="number" id="quantity2" name="quantity2" placeholder="0" step="1" min="1" max="20">
</div>
<div class="check-item">
<div class="check-item-wr">
<input type="checkbox" id="dancetype3" name="dancetype3" value="Venice Waltz">
<span>Venice Waltz</span>
</div>
<input type="number" id="quantity3" name="quantity3" placeholder="0" step="1" min="1" max="20">
</div>
<div class="check-item">
<div class="check-item-wr">
<input type="checkbox" id="dancetype4" name="dancetype4" value="Foxtrot">
<span>Foxtrot</span>
</div>
<input type="number" id="quantity4" name="quantity4" placeholder="0" step="1" min="1" max="20">
</div>
<div class="check-item">
<div class="check-item-wr">
<input type="checkbox" id="dancetype5" name="dancetype5" value="Quickstep">
<span>Quickstep</span>
</div>
<input type="number" id="quantity5" name="quantity5" placeholder="0" step="1" min="1" max="20">
</div>
</div>
jquery (мои попытки сделать это на jquery)
$(document).ready(function(){
$('.check-item input[type="number"]').each(function() {
$(this).change(function() {
var danceCount = $(this).val();
console.log(danceCount);
if( danceCount > 0 ) {
$('.check-item input:checkbox').each(function() {
$('.check-item input:checkbox').prop('checked', true);
});
} else {
$('.check-item input:checkbox').prop('checked', false);
}
});
});
});