[AIRFLOW-5306] Fix display of links when they contain special characters
diff --git a/airflow/www/templates/airflow/dag.html b/airflow/www/templates/airflow/dag.html
index 43c1457adb740..11c52031d4e35 100644
--- a/airflow/www/templates/airflow/dag.html
+++ b/airflow/www/templates/airflow/dag.html
@@ -493,32 +493,30 @@ <h4 class="modal-title" id="dagModalLabel">
                   "&dag_id=" + encodeURIComponent(dag_id) +
                   "&execution_date=" + encodeURIComponent(execution_date) +
                   "&link_name=" + encodeURIComponent(link);
+          var external_link = $('<a href="#" data-toggle="tooltip" class="btn btn-primary disabled" target="_blank"></a>')
+          var link_tooltip = $('<span class="tool-tip" data-toggle="tooltip" style="padding-right: 2px; padding-left: 3px" data-placement="top" ' +
+            'title="link not yet available"></span>');
+          link_tooltip.append(external_link)
+          external_link.text(link);
 
-          var underscore_link = link.split(" ").join("_");
-          var a = '<span class="tool-tip" data-toggle="tooltip" style="padding-right: 2px; padding-left: 3px" data-placement="top" ' +
-                  'title="link not yet available" id="tooltip-' + underscore_link +'">' +
-                    '<a id="link-' + underscore_link +'" href="#" data-toggle="tooltip" class="btn btn-primary disabled" target="_blank">' + link + '</a>' +
-                  '</span>';
           $.ajax(
             {url: url,
              cache: false,
              success: function (data, textStatus, jqXHR) {
-               var external_link = $( "#link-" + underscore_link );
                external_link.attr('href', data['url']);
                external_link.removeClass('disabled');
-               $("#tooltip-" + underscore_link).tooltip('disable');
+               link_tooltip.tooltip('disable');
              },
              error:  function (data) {
-               var link_tooltip = $("#tooltip-" + underscore_link);
                link_tooltip.tooltip('hide').attr('title', data['responseJSON']['error']).tooltip('fixTitle');
              }
            });
 
-          markupArr.push(a)
+          markupArr.push(link_tooltip)
         });
 
         $('#extra_links').prev('hr').show();
-        $('#extra_links').append(markupArr.join('')).show();
+        $('#extra_links').append(markupArr).show();
         $('[data-toggle="tooltip"]').tooltip();
       }
 

Make sure you have checked _all_ steps below.

### Jira

- [ ] My PR addresses the following [Airflow Jira](https://issues.apache.org/jira/browse/AIRFLOW/) issues and references them in the PR title. For example, "\[AIRFLOW-XXX\] My Airflow PR"
  - https://issues.apache.org/jira/browse/AIRFLOW-5306
  - In case you are fixing a typo in the documentation you can prepend your commit with \[AIRFLOW-XXX\], code changes always need a Jira issue.
  - In case you are proposing a fundamental code change, you need to create an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvements+Proposals)).
  - In case you are adding a dependency, check if the license complies with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).

### Description

In PR https://github.com/apache/airflow/pull/5906 I wanted to create a link that contains the "#" character, but it was not set correctly in the web interface.


CC: @milton0825 

### Tests

- [ ] My PR adds the following unit tests __OR__ does not need testing for this extremely good reason:

### Commits

- [ ] My commits all reference Jira issues in their subject lines, and I have squashed multiple commits if they address the same issue. In addition, my commits follow the guidelines from "[How to write a good git commit message](http://chris.beams.io/posts/git-commit/)":
  1. Subject is separated from body by a blank line
  1. Subject is limited to 50 characters (not including Jira issue reference)
  1. Subject does not end with a period
  1. Subject uses the imperative mood ("add", not "adding")
  1. Body wraps at 72 characters
  1. Body explains "what" and "why", not "how"

### Documentation

- [ ] In case of new functionality, my PR adds documentation that describes how to use it.
  - All the public functions and the classes in the PR contain docstrings that explain what it does
  - If you implement backwards incompatible changes, please leave a note in the [Updating.md](https://github.com/apache/airflow/blob/master/UPDATING.md) so we can assign it to a appropriate release

### Code Quality

- [ ] Passes `flake8`
