javascripthtmljquerycloning

My active/disable Functionality no longer works after cloning

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 class="column-bottom phone">
  <p class="para_txt">Phone</p>

  <div id="main-wrapper">

    <div id="wrapper_1" class="parentClass">
      <div class="basic_infor">
        <p>Select the nature of phone:</p>
        <div class="parent_btns">
          <button class="func_btns btn_first_4 " >Private</button>
          <button class="func_btns btn_second_4" >Work</button>
        </div>
      </div>
      <div class="basic_infor">
        <p>Select the type of phone:</p>
        <div class="parent_btns">
          <button class="func_btns btn_5">Mobile</button>
          <button class="func_btns btn_6 ">Telephone</button>
          <button class="func_btns btn_7 ">Fax</button>
          <button class="func_btns btn_8">Extension</button>
        </div>
      </div>

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

  </div>

  <div class="btn_add">
    <button class="repl_btns phone_repl" 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();
}
Solution

  • Problems

    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

    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 class="btn priv" type='button'>Private</button>
          <button class="btn work" type='button'>Work</button>
        </menu>
        <label>Select the type of phone:</label>
        <menu class='type select'>
          <button class="btn mob" type='button'>Mobile</button>
          <button class="btn tel" type='button'>Telephone</button>
          <button class="btn fax" 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>