1 files changed, 3 insertions, 2 deletions

diff --git a/webapp/components/setting_item_min.jsx b/webapp/components/setting_item_min.jsx
index 4f756c46e..da86ed4a7 100644
--- a/webapp/components/setting_item_min.jsx
+++ b/webapp/components/setting_item_min.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import {FormattedMessage} from 'react-intl';
+import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 
@@ -12,7 +13,7 @@ export default class SettingItemMin extends React.Component {
             editButton = (
                 <li className='col-xs-12 col-sm-3 section-edit'>
                     <a
-                        id={this.props.title}
+                        id={Utils.createSafeId(this.props.title.toString() + 'Edit')}
                         className='theme'
                         href='#'
                         onClick={this.props.updateSection}
@@ -35,7 +36,7 @@ export default class SettingItemMin extends React.Component {
                 <li className='col-xs-12 col-sm-9 section-title'>{this.props.title}</li>
                 {editButton}
                 <li
-                    id={this.props.title + 'Desc'}
+                    id={Utils.createSafeId(this.props.title.toString() + 'Desc')}
                     className='col-xs-12 section-describe'
                 >
                     {this.props.describe}