My active/disable Functionality no longer works after cloning-CodePudding

I'm using the clone method to duplicate a form. I'm adding and removing the active class on the buttons but, once I clone the form, the duplicate buttons no longer function because they share the same class as the original. I want the buttons to still function regardless how many times I clone it. I used jQuery and JavaScript, and I'm still new to programming. Can you please give me some ideas as to how to solve this. Thanks in advance fellow developers.

Here is my HTML Code:

<div >
  <p >Phone</p>

  <div id="main-wrapper">

    <div id="wrapper_1" >
      <div >
        <p>Select the nature of phone:</p>
        <div >
          <button  >Private</button>
          <button  >Work</button>
        </div>
      </div>
      <div >
        <p>Select the type of phone:</p>
        <div >
          <button >Mobile</button>
          <button >Telephone</button>
          <button >Fax</button>
          <button >Extension</button>
        </div>
      </div>

      <div >
        <input type="textarea" placeholder=" 27 85 223 5258">
        <span onclick="delete_el();">x</span>
      </div>
      
    </div>

  </div>

  <div >
    <button  onclick="duplicate();">Add additional</button>
    <p>Display on foreman contact list?</p>
    <input type="checkbox" id="input_field" name="Phone_contact">
  </div>

</div>

Here is my jQuery and JavaScript Code. I selected the class for the first button and added a active class to it while removing the active class for the second button. I did the same for the rest of the buttons.

    //private btn
$(".btn_first_4").click(function () {
        $(this).addClass("is_active");
        $(".btn_second_4").removeClass("is_active");
});

//work btn
$(".btn_second_4").click(function () {
        $(this).addClass("is_active");
        $(".btn_first_4").removeClass("is_active");
});

//Bottom 5 btns

$(".btn_5").click(function () {
    $(this).addClass("is_active");
    $(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})

$(".btn_6").click(function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})

$(".btn_7").click(function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})

$(".btn_8").click(function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})

/* Cloning Functions.... I tried to set the id of my new clone to "wrapper_2", but it only works when i clone it once. I wanted to change the class attribute this way but I realize it wont work as well. Please advise. Thanks */

 function duplicate(){
    const wrapper = document.getElementById("wrapper_1");
    const clone = wrapper.cloneNode(true);
    clone.id = "wrapper_2";
    const main_wrapper = document.getElementById("main-wrapper");
    main_wrapper.appendChild(clone)
}

function delete_el() {
    const del_el = document.getElementById("wrapper_2");
    del_el.remove();
}

CodePudding user response：

Problems

If you use .cloneNode() any event handlers bound to the original will not carry over to the clone. Fortunately you are using jQuery which has it's own method .clone(). It has the ability to clone and keep event handlers, $(selector).clone(true) to copy with events and $(selector).clone(true, true) for a deep copy with events.

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

.clone()|jQuery API Documentation

Do not clone anything with an id, in fact you are using jQuery so don't use id at all. Convert every id to a class, it might feel like a lot of work but in the long run you'll be thankful you did.
Do not use inline event handlers
```
<button onclick="lame(this)">DON'T DO THIS</button>
```
This is especially important if you use jQuery which makes event handling incredibly easy to write and very versatile.

let count = 0;
$('output').val(  count);
$('.remove').hide();

$('.select button').on('click', function() {
  const $old = $(this).parent().find('.active');
  if (!$old.is(this)) {
    $old.removeClass('active');
  }
  $(this).toggleClass('active');
});

$('.clear').on('click', function() {
  $(this).parent().find('input').val('');
});

$('.remove').on('click', function() {
  $(this).closest('.fields').remove();
  let out = $.makeArray($('output'));
  count = out.reduce((sum, cur, idx) => {
    cur.value = idx   1;
    sum = idx   1;
    return sum;
  }, 0);
});

$('.add').on('click', function() {
  const $first = $('.fields').first();
  const $copy = $first.clone(true, true);
  $copy.insertAfter($('.fields').last());
  $copy.find('output').val(  count);
  $copy.find('.remove').show();
  $copy.find('input').val('');
});

html {
  font: 300 2ch/1.2 'Segoe UI'
}

fieldset {
  min-width: fit-content
}

.fields {
  margin-top: 1rem;
}

output {
  font-weight: 900;
}

menu {
  display: flex;
  align-items: center;
  margin: 0.5rem 0 0.25rem;
}

button,
input {
  display: inline-block;
  font: inherit;
  font-size: 100%;
}

button {
  cursor: pointer;
  border: 1.5px ridge lightgrey;
}

.numbers {
  display: flex;
  align-items: center;
  margin: 1rem 0 0.5rem -40px;
}

.clear {
  border: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.right {
  justify-content: flex-end;
}

.left {
  padding-left: 0;
}

.number-3 {
  width: 9rem;
}

.number-1 {
  width: 3rem;
}

[class^="number-"] {
  font-family: Consolas
}

.clear {
  border: 0;
  background: transparent;
}

label label {
  margin-left: 6px;
}

button:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

button:nth-of-type(2) {
  border-radius: 0;
}

button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.active {
  outline: 2px lightblue solid;
  outline-offset: -2px;
}

#foreman {
  transform: translate(0, 1.5px)
}

.btn.remove {
  display: block;
  border-radius: 4px;
  float: right;
}

<form id='phone'>
  <fieldset class='main'>
    <legend>Add Phone Numbers</legend>
    <section class='fields'>
      <fieldset>
        <legend>Phone Number <output value='1'></output></legend>
        <button class='btn remove' type='button'>Remove</button>
        <label>Phone number is used for:</label>
        <menu class='purpose select'>
          <button  type='button'>Private</button>
          <button  type='button'>Work</button>
        </menu>
        <label>Select the type of phone:</label>
        <menu class='type select'>
          <button  type='button'>Mobile</button>
          <button  type='button'>Telephone</button>
          <button  type='button'>Fax</button>
        </menu>

        <menu class='numbers'>
          <form name='numbers'>
            <label>Number:&ThickSpace;</label>
            <input name='phone' class='number-3' type="tel" placeholder=" 27 85 223 5258" required>

            <label>&ThickSpace;Ext.&ThickSpace;</label>
            <input name='ext' class='number-1' type='number' placeholder='327'>
            <button class='btn clear' type='button'>X</button>
          </form>
        </menu>
      </fieldset>
    </section>
    <fieldset>
      <menu class='right'>
        <button class='btn cancel' type='button'>Cancel</button>
        <button class='btn done'>Done</button>
        <button class='btn add' type='button'>Add</button>
      </menu>
    </fieldset>
    <footer>
      <menu>
        <input id='foreman' name="contact" type="checkbox">
        <label for='foreman'>Display on foreman contact list?</label>
      </menu>
    </footer>
  </fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

When load page , JS add event click for elements ( elements were created)
When you clone new elements ( those do not add event click) and event click of you not working on those elements

You are using Jquery then i suggest you code same as below :

$(document).on('click', ".btn_first_4", function () {
        $(this).addClass("is_active");
        $(".btn_second_4").removeClass("is_active");
});

//work btn
$(document).on('click', ".btn_second_4", function () {
        $(this).addClass("is_active");
        $(".btn_first_4").removeClass("is_active");
});

//Bottom 5 btns

$(document).on('click', ".btn_5", function () {
    $(this).addClass("is_active");
    $(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})

$(document).on('click', ".btn_6", function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})

$(document).on('click', ".btn_7", function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})

$(document).on('click', ".btn_8", function () {
    $(this).addClass("is_active");
    $(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})
function duplicate(){
    const wrapper = document.getElementById("wrapper_1");
    const clone = wrapper.cloneNode(true);
    clone.id = "wrapper_2";
    const main_wrapper = document.getElementById("main-wrapper");
    main_wrapper.appendChild(clone)
}

function delete_el() {
    const del_el = document.getElementById("wrapper_2");
    del_el.remove();
}

.is_active {
  background-color: green;
}

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

  <div id="main-wrapper">

    <div id="wrapper_1" >
      <div >
        <p>Select the nature of phone:</p>
        <div >
          <button  >Private</button>
          <button  >Work</button>
        </div>
      </div>
      <div >
        <p>Select the type of phone:</p>
        <div >
          <button >Mobile</button>
          <button >Telephone</button>
          <button >Fax</button>
          <button >Extension</button>
        </div>
      </div>

      <div >
        <input type="textarea" placeholder=" 27 85 223 5258">
        <span onclick="delete_el();">x</span>
      </div>
      
    </div>

  </div>

  <div >
    <button  onclick="duplicate();">Add additional</button>
    <p>Display on foreman contact list?</p>
    <input type="checkbox" id="input_field" name="Phone_contact">
  </div>

</div>