Add & remove rows in table

Question

I need help. When I click green plus I want to add one row to the table. When I add a new zone and click green plus I want to add one row to the table in this zone, but it does not work. Removing rows does not work also. Could you help me?

https://jsfiddle.net/agata666/hu1cvy5n/44/

   var TABLEELEVEN = $('.tableEleven');

$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

$('.table-remove').click(function () {
    $(this).parents('tr').detach();
    sumTotalPower()
});


var $foo = $(".tab-pane");
var hash = 1;
$(".add").on("click", function () {
    var $newPanel = $foo.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".panel").data('hash', hashClass).attr("href",  "#" + (++hash)).text("Zone " + hash);

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + hashClass + '" data-toggle="tab" contenteditable="true">Zone ' + hash + '</a></li>').appendTo('.tabs');



$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

});



var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');

function generateHash() {
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
}); 

Answer 1

I tested your code.

You have a duplicated code that is why when you clicked the green button you would see twice row. Remove one of them

$('.table-add-eleven').click(function () {
var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
TABLEELEVEN.find('table').append($clone);
});

For every zone you need to create new instance of table.

Answer 2

Here is updated code https://jsfiddle.net/dsu7vpa1/2/

Also you can test below.

 var TABLEELEVEN = $('.tableEleven'); $('.table-add-eleven').click(function() { var $clone = $(this).closest('.tableEleven').find('tr.hide').clone(true).removeClass('hide'); $(this).closest('.tableEleven').find('table').append($clone); }); $('.table-remove').click(function() { $(this).parents('tr').detach(); sumTotalPower() }); var $foo = $(".tab-pane"); var $newPanelDefault = $foo.clone(); var hash = 1; $(".add").on("click", function() { var $newPanel = $newPanelDefault.clone(); var hashClass = 'zone-panel-' + generateHash(); $newPanel.find(".panel").data('hash', hashClass).attr("href", "#" + (++hash)).text("Zone " + hash); $newPanel.attr("id", "tab" + hash); var nextTab = $('.tabs li').size() + 1; $('<li class="' + hashClass + '"><a href="#tab' + hash + '" data-toggle="tab" contenteditable="true">Zone ' + hash + '</a></li>').appendTo('.tabs'); $($newPanel).appendTo('.tab-content'); $($newPanel).find('.table-add-eleven').click(function() { var $clone = $(this).closest('.tableEleven').find('tr.hide').clone(true).removeClass('hide'); $(this).closest('.tableEleven').find('table').append($clone); }); $($newPanel).find('.table-remove').click(function() { $(this).parents('tr').detach(); sumTotalPower() }); $('a[href="#tab' + hash + '"]').click(); }); var panelDefault = document.querySelectorAll('.panel-default'); var exTabFirst = document.querySelectorAll('.exTabFirst'); var exTabSecond = document.querySelectorAll('.exTabSecond'); var addZoneButton = document.getElementById('add'); function generateHash() { return Math.random().toString(16).substr(-5); } addZoneButton.addEventListener('click', function() { var randomNumber = generateHash(); panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber; exTabFirst.innerHTML = 'exTabFirst ' + randomNumber; exTabSecond.innerHTML = 'exTabSecond ' + randomNumber; }); 

  <meta charset="UTF-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title>Steer</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <!--Screen 5--> <fieldset id="5"> <section id="screen-five" class="screen-five"> <div class="container-fluid"> <div class="exTabFirst"> <div class="addZone"> <button type="button" class="btn btn-light btn-md add" id="add">ADD ZONE<i class="fas fa-plus"></i></button> </div> <ul class="nav nav-tabs tabs"> <li class="active"><a href="#tab1" class="panel" role="tab" data-toggle="tab" contenteditable="true">Zone 1 </a></li> </ul> <div class="tab-content first"> <div class="tab-pane active" id="tab1"> <div class="tablesScreenSix"> <!-- Editable table --> <div class="tableEleven table-editable"> <span class="table-add-eleven float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a></span> <table class="table table-bordered table-responsive-md table-striped text-center"> <tr> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> <th>Description</th> </tr> <tr> <td contenteditable="true">Window</td> <td contenteditable="true">1</td> <td contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true">78.00</td> <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td> <td onkeypress="return testCharacter(event);" contenteditable="true">204.4</td> <td onkeypress="return testCharacter(event);" contenteditable="true">90</td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> <tr> <td contenteditable="true">aaa</td> <td contenteditable="true">1</td> <td contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true">4.00</td> <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td> <td onkeypress="return testCharacter(event);" contenteditable="true">294.4</td> <td onkeypress="return testCharacter(event);" contenteditable="true">90</td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> <tr> <td contenteditable="true">aaaa</td> <td contenteditable="true">1</td> <td contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true">21.00</td> <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td> <td onkeypress="return testCharacter(event);" contenteditable="true">104.4</td> <td onkeypress="return testCharacter(event);" contenteditable="true">90</td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> <tr class="hide"> <td contenteditable="true"></td> <td contenteditable="true"></td> <td contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td onkeypress="return testCharacter(event);" contenteditable="true"></td> <td> <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span> </td> </tr> </table> </div> </div> </div> </div> <div class="row-buttons delete"> <button type="button" class="btn btn-danger btn-sm panel-remove deleteZone"> DELETE ZONE </button> </div> <hr> </div> </div> </section> </fieldset>