Budgeting with PHP and jQuery

I am creating a page for a product where the user can customize the design itself, place the color, the name, and in turn has to go to the same budget, all in the same web. Currently I have achieved everything only the budget as it works as a "shopping cart" where the personalizing and adding to the list the problem is that it has to add, or subtracting as you add or remove, I'm stuck here because I can not get the budget goes adding / subtracting items as the user goes choosing.

<div class="form-group">
    <form name="bag_data" method="POST" accept-charset="UTF8">
        <h4>Order Details</h4>
        <fieldset>
            <ul id="item_" style="list-style:none; text-decoration:none; text-transform: capitalize">

            </ul>

        </fieldset>
        <fieldset>
            <label for="qty">TABS QTY</label>
            <br>
            <input type="number" class="form-control" disabled="" name="qty_item" value="" placeholder="QTY">
            <hr>
        </fieldset>
        <fieldset>
            <label style="font-size:16px; font-family:Arial; display:none" for="color"></label>
            <br>
            <br>
            <button style="display:none" id="button-carts" class="btn btn-primary" type="button" data-loading-text="Loading...">
                        <i class="fa fa-cart-plus"></i>
                        Add to Cart
                        </button>
        </fieldset>
        <hr>
        <fieldset>
            <label>Cart items <i class=" fa fa-cart-plus"></i></label>
            <br>
            <!--                        12 Blue&nbsp;<a href="#"><i style="color: red" class="fa fa-close"></i></a>-->
            <ul id="first_tabs"></ul>
        </fieldset>
        <fieldset style="display:none">
            <input type="hidden" id="id_bag" name="id_bag" value="">
            <input type="hidden" id="color_bag" name="color_name" value="">
            <input type="hidden" id="qty_bag" name="qty_bag" value="">
            <input type="hidden" id="" name="delete" value="">
            <input type="hidden" name="price" value="">
            <input type="hidden" id="suma" name="suma" value="">

        </fieldset>
        <field>
            <h2 id="total" style="font-size:25px" class="price-h">
                <span class="price-old">Total: $0</span>
            </h2>

            <!--                        <input type="submit" class="button" value="Check Out">-->
        </field>
    </form>
</div>
<script>

</script>
<script>
    $(".img-thumbnail").click(
        function (event) {
            $("#item_").html(
                '<ul id="item_" style="list-style:none; text-decoration:none; text-transform: capitalize; margin-left: -4em;font-size: 16px;"><li id="color_selected">'
                + $(this).attr("alt") +
                '&nbsp&nbsp<i style="color:green; font-size:12px" class="fa fa-check"></i></li></ul>');
            $("label[for=qty]").text($(this).attr("alt") + " TABS QTY");
            $("input[name=id_bag]").val($(this).attr("alt"));
            $("input[name=color_name]").val($(this).attr("alt"));
            $("input[name=qty_item]").prop("disabled", false);

        });
</script>
<script>
    $("input[name=qty_item]").change(function () {
        $("label[for=color]").text($(this).val() + " " + $("#color_selected").text()).fadeIn(500);
        $("input[name=qty_bag]").val($(this).val());
        $("#button-carts").fadeIn(800);
        //PRICE COOKIE
        var price = 4.99;
        budget(price, $(this).val());
    });
</script>
<script>
    if ($("#id_bag").val() !== "" && ($("#color_bag") !== "")) {
        $("#button-carts").prop("disabled", false).click(function () {
            if ($("input[name=qty_bag]").val() >= 1) {
                $("#button-carts").prop("disabed", true);
                $.ajax({
                    url: "bag.php",
                    type: "POST",
                    cache: false,
                    data: $("form[name=bag_data]").serialize(),
                    success: function (data) {
                        $("#first_tabs").append(data);
                        $("form[name=bag_data]")[0].reset();
                    },
                    error: function (data) {
                        alert(data);
                    }
                });
            } else {
                alert("error");
            }
            return false;
        });
    }
</script>
<script>
    //COOKIE BUDGET
    function budget(price, increment) {
        $("input[name=price]").val(parseFloat(Math.round(price * increment)));
        //$("#total").html(parseFloat(Math.round(price*increment)));
    }
</script>

PHP Code

$BAG = new bag($_POST["qty_bag"], $_POST["color_name"], $_POST["id_bag"], $_POST["delete"]);
class bag{
    public function bag($num_tabs,$color,$id, $delete){
        $this->num_ = $num_tabs;        
        $this->color_ = $color;
        $this->id_ = $id;
        $data = preg_replace("[\s+]", "", $this->id_);
        $message = $this->num_. " " . $this->color_;
        if(isset($_POST["delete"]) && (empty($_POST["delete"])) && ($_POST["delete"]==="")){
            echo "<li class='bag-list' id='$data'>$message&nbsp&nbsp<a id='$data' href='#'><i style='color:red;font-size:12px' class='fa fa-close'></i></a></li>";
            echo "<script>
            $('#$data').click(
                    function(){
                      $(this).remove();  
                    });
            </script>";
        }else{
           exit;
        }
        if(isset($_POST["price"]) && $_POST["price"]==0){
            $this->budget = $_POST["price"];
            echo "<script>
            $('#total').text($this->budget);
            $('input[name=suma]').val($this->budget);            
            </script>";
            $this->budget = 0;
            echo "ok";
        }else{
            $this->budget = $_POST["price"];
            echo "
            <script>
            var operation = document.getElementById('suma').value
            var suma = parseFloat(operation+$this->budget);
            $('input[name=suma]').reset();
            $('#total').text(suma);
            </script>
            ";
            $this->budget = 0;

        }      
    }
    private $num_, $color_, $id_, $budget;
}

The only problem is the logic, is that when you add an item this from a budget, adding another adds the budget you had previously, and if you delete it automatically subtract from the budget, as a calculator could say