Magento - How to make a quantity increment in product view?

Files needed, Files to be edited:

• JQuery (probably the latest version, better if minified)
• jincrement.js (this is our own js.. you can change its name as you like)
• jQuery.noConflict()
  
• styles.css (styling for the increment buttons)
• layout/catalog.xml (this is where we'll reference our js, just being clean)
• template/catalog/product/view/addtocart.phtml (we'll put a div here)

1. create a file with the name jincrement.js and put this code on it..

jQuery(document).ready(function(){
    var $j = jQuery.noConflict();
    $j("div.quantity").append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');
    $j(".plus").click(function(){
        var currentVal = parseInt($j(this).prev(".qty").val());
        if (!currentVal || currentVal=="" || currentVal == "NaN") 
           currentVal = 0;
           $j(this).prev(".qty").val(currentVal + 1);
    });
    $j(".minus").click(function(){
        var currentVal = parseInt($j(this).next(".qty").val());
        if (currentVal == "NaN") 
            currentVal = 0;
            if (currentVal > 0){
                $j(this).next(".qty").val(currentVal - 1);
            }
    });
});

2. Place the JQuery and jincrement.js on js/
3. in catalog.xml

<!--
Product view
-->
<reference name="head">
            <action method="addJs"><script>jquery.min.js</script></action>
            <action method="addJs"><script>jquery.noconflict.js</script></action>
            <action method="addJs"><script>jquery.jincrement.js</script></action>
           ... OTHER CODES HERE ...
</reference>

4. in addtocart.phtml
   in line 34, enclose in <div class="quantity"></div> the input tag...
   
   
5. style using styles.css.. this is my code for styling..

div.add-to-cart div.quantity input#minus1{
    background-color: #A1A1A1;
    border: 1px solid #BBB;
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    float: left;
    height: 20px;
    margin-right: 1px;
    padding-left: 2px;
    cursor: pointer;
}
div.add-to-cart div.quantity input#minus1:hover{
    background-color: #CCC;
    border: 1px solid #DDD;
}
div.add-to-cart div.quantity input#add1{
    background-color: #A1A1A1;
    border: 1px solid #BBB;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    height: 20px;
    vertical-align: top;
    cursor: pointer;
}
div.add-to-cart div.quantity input#add1:hover{ 
    background-color: #CCC;
    border: 1px solid #DDD;
}
div.add-to-cart div.quantity{
    margin-bottom: 5px;
    float: right;
}

and that's it!