jquery calculate total with quantity and steps

Question

I need help! I need a jquery script to calculate total: I need 1 input field for quantity. If the quantity is: between 1 and 60, the price is 750, between 61 and 90, the price is 850, between 91 and 120, the price is 995, I also need to add new row with quantity input field and I need to calculate the total price of all. I have already tried but don't know how to do it.

Thanks.
I have tried the following:

<script type="text/javascript">
    function miaFunzione() {
        $("#Container").append("<li><input type='text' class='qty' value='' placeholder='superfice' /> <a onclick='miaFunzione()'>aggiungi [+]</a></li>");

        var totale = 0;

        $("#Container li").each(function () {
            var qty = new Number($(this).children('.qty').val());

            if (qty <= 60) {
                prezzo = 750;
            }else if (qty >= 61 && qty <= 90){
                prezzo = 850;
            }else if (qty >= 91 && qty <= 120){
                prezzo = 995;
            };

            totale = totale + prezzo;

        });

        $("#totMoney").html(totale);
    }
</script>

this is the html code

<ul id="Container">
    <li>
        <input type="text" value="" class="qty" placeholder="superfice" /><a onclick="miaFunzione()">aggiungi [+]</a>
    </li>
</ul>
<br />

TOTALE COSTO: € <strong id="totMoney">0</strong>

Answer 1

you can use this

 $(document).ready(function(){ $('body').on('keyup','li > .qty',function(){ var totale = 0; $("#Container li .qty").each(function () { var qty = parseFloat($(this).val()); if (qty <= 60) { prezzo = 750; }else if (qty >= 61 && qty <= 90){ prezzo = 850; }else if (qty >= 91 && qty <= 120){ prezzo = 995; } totale += qty + prezzo; }); $("#totMoney").html(totale); }); $('body').on('click','li > a',function(){ $("#Container").append("<li><input type='text' class='qty' value='' placeholder='superfice' /> <a>aggiungi [+]</a></li>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="Container"> <li> <input type="text" value="" class="qty" placeholder="superfice" /><a>aggiungi [+]</a> </li> </ul> <br /> TOTALE COSTO: € <strong id="totMoney">0</strong> 

Answer 2

Check this jsfiddle I made for you https://jsfiddle.net/n5zoyxq3/

function miaFunzione() {
    $("#Container").append("<li><input type='text' class='qty' value='' placeholder='superfice' /> <a onclick='miaFunzione()'>aggiungi [+]</a></li>");

    var totale = 0;
    var prezzo = 0;

    $("#Container li").each(function () {
        var qty = parseFloat($(this).children('.qty').val());
    if(qty > 0) {
      if (qty <= 60) {
        prezzo = 750;
      }else if (qty >= 61 && qty <= 90){
        prezzo = 850;
      }else if (qty >= 91 && qty <= 120){
        prezzo = 995;
      };
    }

        totale = totale + prezzo;
        prezzo = 0;

    });

    $("#totMoney").html(totale);
}

I've changed the line "var qty = new Number($(this).children('.qty').val());" to "var qty = parseFloat($(this).children('.qty').val());" just to avoid error in case '.qty' has no numeric value.

Below that line I added an "if" to check if var qty has value because your user can add various inputs without value.

After assigning the prezzo to totale I changed prezzo to "0" so in the next loop prezzo will start with value zero.

Hope it helps you.