jQuery combine appendTo row if existing

Question

I want to combine the duplicate .appendTo item with unique code

Instead of having two items I want to combine and add their quantity,

If I will add same item their quantity will only rise up not appending new row.

Javascript

function AddOrder(item) {       
    // order list
    var rows = "";
    var code = document.getElementsByName("code")[item].value;
    var name = document.getElementsByName("name")[item].value;
    var cost = document.getElementsByName("cost")[item].value;
    var qty = document.getElementsByName("qty")[item].value;
    var actn = "";

    rows += 
        "<tr>"+
            "<td class='item_code'>"+code+"</td>"+
            "<td>"+name+"</td>"+
            "<td class='item_qty'>"+qty +"</td>"+ 
            "<td class='item_cost'>"+cost+".00</td>"+ 
            "<td>"+'<button class="btn btn-danger remove-button">x</button>'+actn+"</td>"+
        "</tr>";
    $(rows).appendTo("#order_table tbody");
}

HTML I'm appending item at tbody

<form>
    <input hidden=true name="code" type="text" value="FJVCHPM" >
    <input hidden=true name="name" type="text" value="java chip m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="0" type="button" class="btn btn-default" onclick="AddOrder(this.id)">1</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FCHCHPM" >
    <input hidden=true name="name" type="text" value="chocolate chip m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="1" type="button" class="btn btn-default" onclick="AddOrder(this.id)">2</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FMCHAM" >
    <input hidden=true name="name" type="text" value="mocha m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="85">
    <button id="2" type="button" class="btn btn-default" onclick="AddOrder(this.id)">3</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FCACM" >
    <input hidden=true name="name" type="text" value="oreo m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="3" type="button" class="btn btn-default" onclick="AddOrder(this.id)">4</button>
</form>


<table id="order_table">
  <thead>
    <tr>
      <th>code</th>
      <th>name</th>
      <th>qty</th>
      <th>cost</th>
      <th>act</th>
    </tr>
  </thead>
  <tbody></tbody>
  <thead>
    <tr>
      <th>--</th>
      <th>--</th>
      <th id="total_qty">0</th>
      <th id="total_cost">0</th>
      <th>--</th>
    </tr>
  </thead>
</table>    

If there's need to change on my code please advise me. I just want to combine same item code and add only their quantity if clicked.

Answer 1

Quick working fiddle

Code is pretty much self explaining, you just get try to find if row with code exists. If yes, then get required values (like cost and quantity) and add them with new values. And if row with such code does not exists, then append new row.

function AddOrder(item) {       
    var rows = "";
    var code = $(item).find('[name="code"]').val();
    var name = $(item).find('[name="name"]').val();
    var cost = $(item).find('[name="cost"]').val();
    var qty = $(item).find('[name="qty"]').val();
    var actn = "";

    var existingEl = $('#order_table .item_code');

    var tr = null;
    for(var i = 0; i < existingEl.length; i++){
    if(existingEl.eq(i).text() === code)
        tr = existingEl.eq(i).parent();
    }

    if(tr != null){
        tr.find('.item_qty').text(parseInt(tr.find('.item_qty').text()) + parseInt(qty))
    } else {
    rows += 
        "<tr>"+
            "<td class='item_code'>"+code+"</td>"+
            "<td>"+name+"</td>"+
            "<td class='item_qty'>"+qty +"</td>"+ 
            "<td class='item_cost'>"+cost+".00</td>"+ 
            "<td>"+'<button class="btn btn-danger remove-button">x</button>'+actn+"</td>"+
        "</tr>";
    $(rows).appendTo("#order_table tbody");
    } 
}