Multiply elements of the same jQuery class

I have the following problem I need to multiply two values according to their class but I have more than two boxes where the values are to be multiplied, the multiplication nothing else does to me once here is my code

<div>
  <div class='mult'>
    <input type="number" class="unitario" id="unitario">
  </div>
  <div class='mult'>
    <input type="number" class="cantidad" id="cantidad">
  </div>
  <div>
    <input type="text" class="total" readonly>
  </div>
</div>

<div>
  <div class='mult'>
    <input type="number" class="unitario" id="unitario">
  </div>
  <div class='mult'>
    <input type="number" class="cantidad" id="cantidad">
  </div>
  <div>
    <input type="text" class="total" readonly>
  </div>
</div>

$(document).ready(function(){
      $(".mult input").keyup(multInputs);

    function multInputs() {
        $(".mult").each(function() {
            var $cantidad = $(".cantidad").val();
            var $unitario = $(".unitario").val();
            var $total = $cantidad * $unitario;
            $(".total").val($total);
        });
    }
});

Thank you in advance.