在jquery中添加多个输入类型

Question

我正在尝试添加一个带有一个文本输入字段的复选框字段，可以留空或填写。我几乎就在那里，但我遗漏了一些东西！我可以获得成功添加的复选框和数字输入字段，但不能将它们中的两个一起添加到总计中。这个脚本单独工作，没有我尝试添加的注释行下面的代码。非常感谢任何帮助。

$(".amt").change(function() {
        var amttotal = 0;
    
        $('.amt').each(function() {
           var value = Number($(this).val());
        if (!isNaN(value)) amttotal += value;
        });
    $("#amttotal").html(amttotal.toFixed(0));
});

$(".levels").change(function() {
    var chktotal = 0;
    $(".levels:checked").each(function() {
        chktotal += parseFloat($(this).data('price'));
    });
    $("#chktotal").html(chktotal.toFixed(0));
});

// want to add two totals for a grand total
$(".amt",".levels").change(function() {
    var total = chktotal + amttotal;
     });
 $("#total").html(total.toFixed(0));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="sponsorship">

<p>Sponsorship Level: (check all that apply):</p>
<ul><li><input class="levels" type="checkbox" name="admiral"  onclick="" data-price="0"> Admiral’s Level $2000+ - fill in the blank <input class="amt" type="number" name="amount" min="2000" max="5000" step="100" onclick=""> </li>
<li><input class="levels" type="checkbox" name="commodore" data-price="1500" onclick=""> Commodore’s Level - $1500</li>
<li><input class="levels" type="checkbox" name="captain" data-price="1000" onclick=""> Captain’s Level - $1000</li>
<li><input class="levels" type="checkbox" name="master" data-price="500" onclick=""> Master’s Level - $500</li>
<li><input class="levels" type="checkbox" name="Commodore" data-price="100" onclick=""> Mate’s Level - $100</li>

<li><input class="levels" type="checkbox" name="closing" data-price="750" onclick=""> Closing Dinner Table - $750</li>
<li><input class="levels" type="checkbox" name="cruise" data-price="500" onclick=""> Riverboat Cruise - $500</li>
</ul>
        
        <p>Checkbox total (hide or remove):<span id="chktotal"></span></p>
      <p>fill blank total (hide or remove):<span id="amttotal"></span></p>
        
<p><span style="background-color:#FF6; font-weight:bold">TOTAL DUE: $ <span id="total"></span></span></p>

我也试图缩短并将ealier结合起来，但没有成功：

    $(".amt", ".levels").change(function() {
   var amttotal = 0;

    $('.amt').each(function() {
       var value = Number($(this).val());
    if (!isNaN(value)) amttotal += value;
    });
var chktotal = 0;
$(".levels:checked").each(function() {
    chktotal += parseFloat($(this).data('price'));
});
var total = chktotal + amttotal;

$("#total").html(total.toFixed(0));
});