Bootstrap 3.3.7 collapse button issue(doesn't work)

Question

I have the following code:

@foreach(var data in Model.test){    
    <div style="margin: 3% 0 3% 2%;">
            <button type="button"
                    class="btn btn-warning"
                    style="display:block; width:40%;overflow-wrap:normal;white-space:normal;padding:.5%;"
                    data-toggle="collapse" data-target="#@data.option">
                @data.Name
            </button>
            <div id="@data.option" class="collapse" style="width:40%;float:right;white-space:normal; overflow:scroll;">
                <br />
                <div>
                    <a>
                        Title: @data.Name<br />

                        @foreach (var item in data.Documents)
                        {
                            <p>Related Document:  @item.Name</p>
                        }
                    </a>
                </div>
            </div>
        </div>
}

When I tried general example from bootstrap site it works fine.. but when I plug in the values etc I want it fails.. what am I missing? This is in a view of an MVC web app.

---

I changed the id to be an incremental counter.. so now it works. As pointed out I may have had a duplicate somewhere there.

Answer 1

There were spaces and special chars which was causing this issue. After removing them all it worked.