Choice on a list affects the following duplicated list

Stack Overflow Asked by Mrtsm on December 11, 2021

Following some constructive comments. I will rephrase what I was asking for. I have users who can choose to add a revenu, or up to 4 ones (they can add a salary, a rent they receive, etc.) when they make their choices, a sum of them is made. What I try to do and couldn’t achieve is when a user chooses a revenu and decided to add another one by duplicating the list, the first options choosen will disappear in the second and so forth.

Here’s the code I have so far thanks to freedomn-m

$(document).ready(function() {
  $("#btn-copy").click(function() {
    var target = $(this).closest(".revenus");
    target.clone(true, true).appendTo(target.parent());
  });
});
$(document).ready(function() {
  toggleFields($(".revenus").first());
  $(".revenu-type").change(function() {
    toggleFields($(this).closest(".revenus"));
    //toggleFields2();
  });

});

function toggleFields(wrapper) {
  if (wrapper.find(".revenu-type").val() === "option-1")
    wrapper.find(".option-a").show();
  else
    wrapper.find(".option-a").hide();
  if (wrapper.find(".revenu-type").val() === "option-2")
    wrapper.find(".option-b").show();
  else
    wrapper.find(".option-b").hide();
  if (wrapper.find(".revenu-type").val() === "option-3")
    wrapper.find(".option-c").show();
  else
    wrapper.find(".option-c").hide();
  if (wrapper.find(".revenu-type").val() === "option-4")
    wrapper.find(".option-d").show();
  else
    wrapper.find(".option-d").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revenus">
  <p>Choose type</p>
  <p>revenue:
    <select class="revenu-type" name="dbType">
      <option>Ajouter un autre revenu</option>
      <option value="option-1">Revenu 1</option>
      <option value="option-2">Revenu 2</option>
      <option value="option-3">Revenu 3</option>
      <option value="option-4">Revenu 4</option>
    </select>
  </p>
  <div class="option-a" style="display: flex;">
    <p>
      Option 1 - a
      <input type="text" name="num-child" />
    </p>
    <p>
      Option 1 - b
      <input type="text" name="price-1" />
    </p>
  </div>
  <div class="option-b">
    <p>
      Option 2
      <input type="text" name="price-2" />
    </p>
  </div>
  <div class="option-c">
    <p>
      Option 3
      <input type="text" name="price-3" />
    </p>
  </div>
  <div class="option-d">
    <p>
      Option 4
      <input type="text" name="price-4" />
    </p>
  </div>
  <p align="left">
    <input type="button" value="add" id="btn-copy" />
  </p>
</div>

forms javascript list

Choice on a list affects the following duplicated list

Add your own answers!

Ask a Question