Add element and increase index value when click button in jquery

Question

I am trying to set the value that is increase or decrease when click the Add button. The increasing or decreasing number is on H2 tag

This is what I tried so far.

$(document).ready(function() {
  var maxField = 100;
  var addButton = $('.btn_add_option');
  var wrapper = $('.wrap_add_input div.wrap_input');
  var fieldHTML = '<div><h2>title2</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';

  var x = 1;
  var counter = $(this).index();
  $(addButton).click(function() {

    if (x < maxField) {
      x++;
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.btn_rmv_option', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_add_input">

  <button type="button" class="btn_add_option mar">add</button>

  <div class="wrap_input">
    <div>
      <h2>title1</h2>
      <input type="text" id="" name="" style="width:135px;">
    </div>
  </div>

What do I need to fix the code ? please help.

Akber Iqbal · Accepted Answer · 2018-12-07 06:16:53Z

1

you want to continue adding headings, like this ?

$(document).ready(function() {
  var maxField = 100;
  var addButton = $('.btn_add_option');
  var wrapper = $('.wrap_add_input div.wrap_input');
  var fieldHTML = '';

  var x = 1;
  var counter = $(this).index();
  $(addButton).click(function() {

    if (x < maxField) {
      x++;
      var fieldHTML = '<div><h2>title'+x+'</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';
      $(wrapper).append(fieldHTML);
    }
  });
  $(wrapper).on('click', '.btn_rmv_option', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_add_input">

  <button type="button" class="btn_add_option mar">add</button>

  <div class="wrap_input">
    <div>
      <h2>title1</h2>
      <input type="text" id="" name="" style="width:135px;">
    </div>
  </div>

answered Dec 7, 2018 at 6:16

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sam Over a year ago

yes thank you. but when remove the element and then click add button the index value is getting wrong number

Akber Iqbal Over a year ago

on element removal, decrease the value of 'x'

kshitij · Accepted Answer · 2018-12-07 06:56:49Z

0

Try this code :

$(document).ready(function() {
var maxField = 100;
var addButton = $('.btn_add_option');
var wrapper = $('.wrap_add_input div.wrap_input');

var x = 1;
var counter = $(this).index();
$(addButton).click(function() {

  if (x < maxField) {
     x++;
    $(wrapper).append(setContent(x));
  }
 });
$(wrapper).on('click', '.btn_rmv_option', function(e) {
   e.preventDefault();
   $(this).parent('div').remove();
   x--;
 });
});

 function setContent(x){
       return '<div><h2>title'+x+'</h2><input type="text" id="" name="" style="width:135px;"><button type="button" class="btn_rmv_option">remove</button></div>';
   }

Just need to create dynamic content with value of index. Hope this helps.

edited Dec 7, 2018 at 6:56

answered Dec 7, 2018 at 6:23

kshitij

7209 silver badges18 bronze badges

1 Comment

kshitij Over a year ago

Function setContent has dynamic content. I have updated content it had unexpected space. Kindly try again. @sam

Collectives™ on Stack Overflow

Add element and increase index value when click button in jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related