Clone Div With New Calculator For New Divs

I have some Jquery that I am using to clone a div, inside the div is an input that does a calculation. When I clone the div and it creates a new div, the calculation does not work

Solution 1:

Your buttons get removed because their parent <div> has its contents overwritten (due to your invalid syntax). You're attempting to self-close your sum <div> with <div id="sum" />.

The <div> element cannot be self-closed, as it is not a void element; you must explicitly state that the element is empty with <div id="sum"></div>. Making this change fixes the problem with your buttons disappearing.

Note that you can validate your HTML markup with the W3C validation service, to ensure that your HTML is valid (and thus behaves in a way that is expected). Also note that .bind() is deprecated as of jQuery 3.0; you should be using .on() instead.

As for your cloning not working, that is due to two reasons:

• The first being that you are cloning based on ID, and thus duplicating the ID. IDs must be unique throughout the DOM. Use classes instead of IDs, and use $(this) to refer to the specific cloned element.
  1. Change #sum to .sum, and instead of $("#sum").text(value), use $(this).parent().find(".sum").text(value) to only affect the correct element.
  2. Change var cabwidth = parseFloat($("#cabwidth").val()) || 0 to var cabwidth = parseFloat($(this).val()) || 0.
  3. Remove all use of IDs to ensure valid markup after the cloning.
• The second being that event handlers do not get attached to cloned elements. You need to hoist the scope to an element that is available on DOM load, and make use of event delegation. Instead of $(".calculate").bind("keyup change", function(e), use $("body").on("keyup change", ".calculate", function(e).

This is all fixed in the following example:

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .find("*")
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
}

function remove() {
  $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

// calculator
$(document).ready(function() {
  $("body").on("keyup change", ".calculate", function(e) {
    var cabwidth = parseFloat($(this).val()) || 0;
    var ply = 1.4375;
    var value = cabwidth - ply;

    if (!isNaN(value) && value !== Infinity) {
      $(this).parent().find(".sum").text(value);
    }
  });
});

body {
  padding: 10px;
}

.clonedInput {
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clonedInput">
  <input type="text" class="calculate" placeholder="Cabinet Width">
  <div class="sum"></div>
  <div class="actions">
    <button class="clone">Add</button>
    <button class="remove">Remove</button>
  </div>
</div>

Hope this helps! :)

Solution 2:

Here is an updated jsFiddle.

Some notes on what I changed:

• .bind() is depreciated
• Attached the change/keyup to the document, then passed .calculate as the selector, this will work with dynamic elements, whereas before it wasn't
• Made sure each clone and child elements have a unique ID
• Updated the calculate function to target elements relative to current input