CODEWITHSUNDEEP
jquery
sam
sam

Reputation: 99

Add element and increase index value when click button in jquery

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.

Upvotes: 0

Views: 759

Answers (2)

kshitij
kshitij

Reputation: 710

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.

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

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>

Upvotes: 1

Related Questions