I'm creating dynamic tabs. I'm currently facing two problems:

1. When I click on the span x to delete current tab, it deletes all my tabs.
2. When I getting the array data, it always gets the first tab data only.

Can anyone help me with this? I've tried many ways but I still cannot get my desired result. Here is my fiddle Dynamic Tabs.

Currently my array result looks like this for the 2nd problem when there is two tabs, '2023' and '2025':

[{
  February: "1",
  January: "1",
  Year: "2023"
}, {
  February: "1",
  January: "1",
  Year: "2023"
}]

My expected result would be:

[{
  February: "1",
  January: "1",
  Year: "2023"
}, {
  February: "1",
  January: "1",
  Year: "2025"
}]

$(document).ready(function() {
  addTab();
});

$('#add_tab').click(function() {
  addTab()
});

//delete current tab
$(".nav-tabs").on("click", "span", function() {
  var anchor = $(this).siblings('a');
  console.log(anchor)
  $(anchor.attr('href')).remove();
  $(this).parent().remove();
  $(".nav-tabs").children('a').first().click();
});

function addTab() {
  var nextTab = $(".nav-tabs").children().length;
  var date = new Date().getFullYear()   nextTab;

  // create the tab
  $('<a  href="#tab-'   date   '" data-toggle="tab">'   date   '</a><span> x </span>').appendTo('#tabs');

  // create the tab content
  var html = "";
  html  = '<div  id="tab-'   date   '">';
  html  = '<label><b>Year: </b></label>';
  html  = '<input  type="text" value="'   date   '">';
  html  = '<label><b>January: </b></label>';
  html  = '<input  type="number" value="1">';
  html  = '<label><b>February: </b></label>';
  html  = '<input  type="number" value="1">';
  html  = '</div>';

  //append to tab-content
  var test = $(html).appendTo('.tab-content');

  // make the new tab active
  $('#tabs a:last').tab('show');
}

//get array
$(document).on('click', '#btnGetArray', function(e) {
  var array = []
  $(".monthSettings").each(function() {
    let detail = {
      Year: $(".txtYear").val() || 0,
      January: $(".txtJanuary").val() || 0,
      February: $(".txtFebruary").val() || 0,
    }
    array.push(detail)
    console.log(array)
  });
});

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
  margin-top: 10px;
}

.nav-tabs>a {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.nav-tabs>a>span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}

.nav-tabs>a>span {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">

<div >
  <nav  id="tabs">
    <a href="#"  id="add_tab">  Add Year</a>
  </nav>
</div>
<div ></div>

<button id="btnGetArray">GetData</button>

CodePudding user response：

The issue is because your selectors for retrieving the .txtYear, .txtJanuary and .txtFebruary will only look at the value of the first element in the collection, no matter how many it finds.

To correct this you can use find() from the parent element, which you can reference from the each() loop, to retrieve the child elements in that iteration.

Taking this a step further, you can simplify the logic by using map() instead of each() to build your array, but the use of find() remains the same.

In addition, there's some other improvements which can be made to the code, such as ensuring all event handlers are within document.ready and using template literals to make the HTML string concatenation easier to read.

jQuery($ => {
  $('#add_tab').on('click', addTab);

  addTab();

  $(".nav-tabs").on("click", "span", function() {
    var anchor = $(this).siblings('a');
    console.log(anchor)
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs").children('a').first().click();
  });

  $(document).on('click', '#btnGetArray', e => {
    var array = $(".monthSettings").map((i, container) => ({
      Year: $(container).find('.txtYear').val() || 0,
      January: $(container).find('.txtJanuary').val() || 0,
      February: $(container).find('.txtFebruary').val() || 0,
    })).get();
    
    console.log(array);
  });
});

function addTab() {
  var nextTab = $(".nav-tabs").children().length;
  var date = new Date().getFullYear()   nextTab;

  $(`<a  href="#tab-${date}" data-toggle="tab">${date}</a><span> x </span>`).appendTo('#tabs');

  var html = `
    <div  id="tab-${date}">
      <label><b>Year: </b></label>
      <input  type="text" value="${date}" />
      <label><b>January: </b></label>
      <input  type="number" value="1" />
      <label><b>February: </b></label>
      <input  type="number" value="1" />
    </div>`
  var test = $(html).appendTo('.tab-content');

  // make the new tab active
  $('#tabs a:last').tab('show');
}

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
  margin-top: 10px;
}

.nav-tabs>a {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.nav-tabs>a>span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}

.nav-tabs>a>span {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">

<div >
  <nav  id="tabs">
    <a href="#"  id="add_tab">  Add Year</a>
  </nav>
</div>
<div ></div>

<button id="btnGetArray">GetData</button>