Tags data-target with (one whitespace) not recognized

Question

I have a html accordion in which I am calling the according body through data-value with white space.

Accordion header:

    <div data-toggle="collapse" data-target="#Drug Test">Drug Test</div>

Accordion body:

    <div id="Drug Test" class="accordion-body collapse ">
      <p>Test Data</p>       
    </div>

But on clicking accordion header body is not opening since data-target value has white space.As it is coming from database using that is compulsory for dynamic accordion generation.

Can anybody suggest a workaround? P.S: This has to be ressolved on client side only

UPDATE: This is my source html with angular directives

  <div class="form-group panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div ng-repeat="key in keys">
                                    <div class="panel panel-default selectedinvestigations">
                                        <div class="panel-heading">
                                            <i class="glyphicon glyphicon-folder-open pull-right"></i>
                                            <input id="btn{{key}}" type="checkbox" class="pull-left" ng-click="selectAll(key)" />

                                            <div class="padLeft" data-toggle="collapse" data-target="#{{key}}">{{key}}</div>
                                        </div>
                                        <div class="panel-body">
                                            <div id="{{key}}" class="accordion-body collapse ">
                                                <div class="" ng-repeat="inv in allInvestigationsGrouped[key]">
                                                    <div>
                                                        <ul>
                                                            <div class="col-md-8 input-group">
                                                                <span class="input-group-addon ">
                                                                    <input name="checkAll" class="{{key}}" type="checkbox" ng-model="inv.selected"
                                                                           data-id="{{inv.id}}"
                                                                           data-name="{{inv.name}}"
                                                                           data-description="{{inv.description}}"
                                                                           data-isactive="{{inv.isActive}}"
                                                                           data-quantity="{{inv.quantity}}" />
                                                                </span>
                                                                <label class="form-control">{{inv.name}} </label>
                                                            </div>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

Answer 1

You can replace space with _ with the str_replace in php:

<?php echo str_replace(' ', '_', $row['from_database_table']); ?>

Try this:

<div data-toggle="collapse" data-target="#<?php echo str_replace(' ', '_', $row['from_database_table']); ?>">Drug Test</div>

<div id="<?php echo str_replace(' ', '_', $row['from_database_table']); ?>" class="accordion-body collapse">
      <p>Test Data</p>       
</div>