how to write javascript calculated array

Question

1. Why the 2 array can't press + or -
2. So i wanna get this price & quantity will sum and get value in amount

3. when you also and price and the system will be get the value out in amount the total in below will be change ( it extract from amount )

   <table class="table table-striped table-hover">
    <thead>
    <tr>
    <th class="span1" style="text-align:center;">Delete</th>
    <th class="span12" style="text-align:center;">Name</th>
    <th class="span2" style="text-align:center;">Price</th>
    <th class="span2" style="text-align:center;">Quantity</th>
    <th class="span2" style="text-align:center;">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td style="text-align:center; vertical-align:middle;">
    <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
    </td>
    <td style="text-align:left; vertical-align:middle;">test</td>
    <td style="text-align:center; vertical-align:middle;">24</td>
    <td style="text-align:center; vertical-align:middle;">
    <div class="input-append">
    <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
    <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
    <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
    </div>
    </td>+63
    <td style="text-align:right; vertical-align:middle;"></td>
    </tr>
    <tr>
    <td style="text-align:center; vertical-align:middle;">
    <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
    </td>
    <td style="text-align:left; vertical-align:middle;">test</td>
    <td style="text-align:center; vertical-align:middle;">24</td>
    <td style="text-align:center; vertical-align:middle;">
    <div class="input-append">
    <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
    <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
    <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
    </div>
    </td>+63
    <td style="text-align:right; vertical-align:middle;"></td>
    </tr> 
    </tbody>
    <tfoot>
    <tr>
    <td colspan="3"></td>
    <td style="text-align:center; vertical-align:middle;">
    <strong>Total</strong>
    </td>
    <td style="text-align:right; vertical-align:middle;"></td>
    </tr>
    </tfoot>
   </table>
   

The JavaScript is as follows:

 button_up=document.getElementById('up');
 button_down=document.getElementById('down');
 button_up.onclick=function() {setQuantity('up');}
 button_down.onclick=function() {setQuantity('down');}
 quantity = document.getElementById('quantity[]');
 function setQuantity(upordown) {
 if (quantity.value > 1) {
 if (upordown == 'up') {++quantity.value;}
 else if (upordown == 'down') {--quantity.value;}
 }
 else if (quantity.value == 1) {
 if (upordown == 'up') {++quantity.value;}
 }
 else
 {quantity.value=1;}
 }

http://jsfiddle.net/Danglebz/ucdpx/

• Mattias Buelens: For starters, you have multiple elements with the same id: up, down and quantity[]). That's illegal HTML, and it causes your script to only select the first occurrence (the first row works). You probably want to use classes instead.
• Callum Linington: You need to use unique id's for updating quantity or anything else, so javascript knows where to put it in ur DOM
• icedwater: If you would be so kind as to separate the style info from your HTML and refactor them, you would be able to spot some unclosed tags and be able to re-read your code more easily in future as well.

Answer 1

a lot of small fixes same id for different objects are not good and the js code have to be more portable, so if you have 1000 lines it'll work the best way would be to use event delegation but there's a version

function setQuantity(e) {
 var upordown = $(e.target).hasClass("up") ? "up" : "down"
 , objQt = $(e.target).closest("div").find("input");
 if (parseInt(objQt.val(), 10) > 1) {
 if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}
 else if (upordown == 'down'){objQt.val(parseInt(objQt.val(),10)-1);}}
 else if (objQt.val() == 1) {
 if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}}
 else
 {objQt.val(1);}
 }
$(".btn").click(setQuantity);

http://jsfiddle.net/ucdpx/2/

• Danglebz Highbreed: Thank you for Question No.1.