jquery adding divs twice

Question

I have created a jquery function that adds a div along with fields inside it. First time I click it, it adds one div but when I click second time it adds two divs and it should only add one.

What I am doing, is that I am counting the divs and then adding 1 and then attaching new count along with ids of fields. Can anyone check and tell why this is giving unexpected behaviour?

$(".add_product").click(function(e) {
  e.preventDefault();
  var div_count = $(".product_fields").length;
  alert(div_count);
  var new_div_count = (div_count + 1);
  $(".product_fields").append('<div class="product_divs"><div class="product_fields"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div></div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h5>Item 1</h5>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="action_div"><a href="#" class="add_product">Add new product</a></div>
</div>

I suspect it has something to do with the HTML you are appending not matching the pattern of the original HTML. — Scott Marcus
– Scott Marcus, Commented Jul 19, 2017 at 21:16

Scott Marcus · Accepted Answer · 2017-07-19 21:33:33Z

You should only be appending new products, not the container div elements as well. This is throwing your counter off.

Also (just a side note). You should not use HTML heading elements (h1...h6) because of the way they make the text look. That is the job of CSS. Use headings to denote sequential sections and sub-sections.

Lastly, only use <a> elements when you want navigation. If you need something to click on to trigger an action, just about any element supports a click event. In the code below, the a has been removed and just the div is the clickable thing. This also eliminates the need for e.preventDefault().

$(".add_product").click(function(e) {

  var new_div_count = ++$(".product").length;
  
  // You only want to be appending a new product, not .product_divs or .product_fields
  
  $(".product_fields").append('<h1 class="product">Item ' + new_div_count + '</h1><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div>');

});

/* Use the proper heading ranks but style them any way you want. */
.product { font-size:.75em; font-weight:bold; }

/* Make the "Add product" div look like a link without having a link */
.add_product {
  cursor:pointer;
  text-decoration:underline; 
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h1 class="product">Item 1</h1>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="add_product">Add new product</div>
</div>

Stephen Gilboy · Accepted Answer · 2017-07-19 21:16:18Z

1

You're appending <div class="product_fields"> causing length to increase by 1 each time.

answered Jul 19, 2017 at 21:16

Stephen Gilboy

5,8552 gold badges34 silver badges42 bronze badges

1 Comment

Scott Marcus Over a year ago

He's also appending product_divs, which he shouldn't.

Monkey_Dev1400 · Accepted Answer · 2017-07-19 21:23:01Z

Take product_divs and product_fields off the append and add a different class.

$(".add_product").click(function(e) {
  e.preventDefault();
  var div_count = $(".fish").length + 1;
  alert(div_count);
  var new_div_count = (div_count + 1);
  $(".product_fields").append('<div class="fish"><h5>Item ' + new_div_count + '</h5><div class="input-field"><input type="text" id="item_name_"' + new_div_count + '" name="item_name[]" required><label for="item_name_1">Item Name</label></div><div class="row"><div class="col s4"><div class="input-field"><input type="text" id="item_quantity_"' + new_div_count + '" name="item_quanity[]" required><label for="item_quantity_1">Item Quantity</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_cost_price_"' + new_div_count + '" name="item_cost_price[]" required><label for="item_cost_price_1">Item Cost Price</label></div></div><div class="col s4"><div class="input-field"><input type="text" id="item_retail_price_"' + new_div_count + '" name="item_retail_price[]"><label for="item_retail_price_1">Item Retail Price</label></div></div></div></div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s7 product_field_div">
  <div class="product_divs">
    <div class="product_fields">
      <h5>Item 1</h5>
      <div class="input-field">
        <input type="text" id="item_name_1" name="item_name[]" required>
        <label for="item_name_1">Item Name</label>
      </div>
      <div class="row">
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_quantity_1" name="item_quanity[]" required>
            <label for="item_quantity_1">Item Quantity</label>
          </div>
        </div>

        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_cost_price_1" name="item_cost_price[]" required>
            <label for="item_cost_price_1">Item Cost Price</label>
          </div>
        </div>
        <div class="col s4">
          <div class="input-field">
            <input type="text" id="item_retail_price_1" name="item_retail_price[]">
            <label for="item_retail_price_1">Item Retail Price</label>
          </div>
        </div>
      </div>

    </div>
  </div>


  <div class="action_div"><a href="#" class="add_product">Add new product</a></div>
</div>

Amit Bhagat · Accepted Answer · 2017-07-19 21:35:03Z

0

Istead of $(".product_fields").append

use $(".product_field_div > .action_div").before

answered Jul 19, 2017 at 21:35

Amit Bhagat

4,3463 gold badges25 silver badges24 bronze badges

Collectives™ on Stack Overflow

jquery adding divs twice

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related