点击Add Procedure按钮时所有div折叠而非当前div的问题排查

Hey there! I see exactly what's causing your issue—let's walk through the fixes step by step.

What's Going Wrong #

• Duplicate IDs: Every dynamically added panel uses the same id="collapse1", plus duplicate IDs like add-proc and list2. Bootstrap's collapse targets elements by their unique ID, so clicking any toggle will affect all elements with that ID.
• Redundant Class Attributes: Some elements (like the <select>) have two separate class attributes, which is invalid HTML and can cause unexpected behavior.
• Fragile Inline Event Handling: While your onclick works for initial elements, using event delegation is more reliable for dynamic content.

Step-by-Step Fix #

1. Generate Unique IDs for Each Collapse Panel #

Use your existing room variable to create unique IDs for each collapse toggle and target panel. This ensures Bootstrap only affects the specific panel tied to the button you click.

2. Replace Duplicate IDs with Classes #

IDs must be unique on a page, so convert repeated IDs like add-proc and list2 to classes (since you're already using class selectors elsewhere).

3. Clean Up Invalid HTML #

Merge duplicate class attributes into a single one.

4. (Optional) Use Event Delegation for Dynamic Buttons #

Instead of inline onclick, bind the add_fields function to a parent element that exists on page load—this ensures new buttons work without re-binding.

Modified Code #

Updated HTML #

<div class="list col-xs-6">
  <div class="dropdown">
    <input type="text" placeholder="Add procedure name" class="add-proc">
  </div>
</div>
<div class="list col-xs-6">
  <div class="dropdown">
    <select name="list2" class="dropdown-select list2" onchange="hideorshow()">
      <option value="1" selected>To be done </option>
      <option value="2">Done</option>
      <option value="3">Make note</option>
    </select>
  </div>
</div>
<br><br>
<div class="panel panel-default panel-group">
  <div class="panel-heading">
    <span class="panel-title" data-toggle="collapse" href="#collapse1">
      <i class="fa fa-plus"></i>
    </span>
  </div>
  <div class="panel-collapse collapse-in" id="collapse1">
    <div class="panel-body">
      <div class="cost">
        <input type="number" placeholder="Add cost" class="add-cost" min="0">
      </div>
      <div class="form-group appointment">
        <div class="input-group datetimepicker">
          <input type="text" class="form-control" readonly>
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span> + <span class="fa fa-clock-o"></span>
          </span>
        </div>
      </div>
      <div class="col-xs-6 row">
        <div class="specific-inputdiv">
          <input type="text" placeholder="Add your note here" class="specific-input">
        </div>
      </div>
      <div class="col-xs-6">
        <div class="procedure">
          <input type="button" class="btn btn-default add_fields_btn add-proc2" value="Add new procedure">
        </div>
      </div>
    </div>
  </div>
</div>
<div id="add_field" class="col-xs-12"></div>
<div class="col-xs-12">
  <input type="submit" class="btn btn-success" id="submit" value="Submit" name="job_submit">
</div>

Updated JavaScript #

// Use event delegation for dynamic buttons
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('add_field').parentElement.addEventListener('click', function(e) {
    if (e.target.classList.contains('add_fields_btn')) {
      add_fields();
    }
  });
});

var room = 1;
function add_fields() {
  room++;
  var objTo = document.getElementById('add_field');
  var divtest = document.createElement("div");
  
  // Use unique ID for collapse (collapse-${room})
  divtest.innerHTML = `
    <div class="row">
      <div class="list col-xs-6">
        <div class="dropdown">
          <input type="text" placeholder="Add procedure name" class="add-proc">
        </div>
      </div>
      <div class="list col-xs-6">
        <div class="dropdown">
          <select name="list2" class="dropdown-select list2" onchange="hideorshow()">
            <option value="1" selected>To be done </option>
            <option value="2">Done</option>
            <option value="3">Make note</option>
          </select>
        </div>
      </div>
      <br><br>
      <div class="panel panel-default panel-group">
        <div class="panel-heading">
          <span class="panel-title" data-toggle="collapse" href="#collapse${room}">
            <i class="fa fa-plus"></i>
          </span>
        </div>
        <div class="panel-collapse collapse-in" id="collapse${room}">
          <div class="panel-body">
            <div class="cost">
              <input type="number" placeholder="Add cost" class="add-cost" min="0">
            </div>
            <div class="form-group appointment">
              <div class="input-group datetimepicker">
                <input type="text" class="form-control" readonly>
                <span class="input-group-addon">
                  <span class="fa fa-calendar"></span> + <span class="fa fa-clock-o"></span>
                </span>
              </div>
            </div>
            <div class="col-xs-6 row">
              <div class="specific-inputdiv">
                <input type="text" placeholder="Add your note here" class="specific-input">
              </div>
            </div>
            <div class="col-xs-6">
              <div class="procedure">
                <input type="button" class="btn btn-default add_fields_btn add-proc2" value="Add new procedure">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
  objTo.appendChild(divtest);
}

Key Changes Explained #

• Unique IDs: Each new collapse panel gets id="collapse${room}" and the toggle's href points to this unique ID—so clicking a toggle only affects its own panel.
• Class Replacements: Removed duplicate IDs (add-proc, list2) and used classes instead to maintain styling/functionality without ID conflicts.
• Event Delegation: Instead of inline onclick, we bind the click event to a parent element. This works for dynamically added buttons because events bubble up, so we can check if the clicked element is an add_fields_btn.
• Cleaned HTML: Merged duplicate class attributes (e.g., the <select> now has one class attribute with both values).

内容的提问来源于stack exchange，提问作者Piyush Agrawal