Hide button everywhere besides specific URL in knockout

I have the following button:

<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText">
    <figure>
        <img src="../../../Images/NotesPink.png" />
        <figcaption data-bind="text: $data.ProcurementbuttonText() ? 'Save': 'Edit'"></figcaption>
    </figure>
</button>

I want to only show it in this specific url http://localhost:5595/#scorecard/ec5aa8ed-2798-4e71-b13d-f3e525994538/dashboard/PrefDashBoard

Bearing in mind that ec5aa8ed-2798-4e71-b13d-f3e525994538 is an id, thats always changing but i want it to show with all ids as well for example the button should show here as well http://localhost:5595/#scorecard/2356789-234-234d-g3g3-reg456452/dashboard/PrefDashBoard and i want to hide it where this isnt the url. I tried the following code but it doesnt seem to work:

        <script>
     $(document).ready(function(){
    if(window.location.pathname.match(/\/dashboard/PrefDashBoard))
    {
    $(".DashboardEdit").show();
    }
    else
    {
    $(".DashboardEdit").hide();
    }
    });
    </script>

Here is the JS of that button:

            self.ProcurementbuttonText = ko.observable(false);

        self.changeButtonText = function(){
            self.ProcurementbuttonText(!self.ProcurementbuttonText())
            if (!self.ProcurementbuttonText()){
                var data = {
                    'ScorecardId':ko.observable(localStorage.getItem('scorecardId'))(),
                    'DashboardConfig':ko.observable(localStorage.getItem('ElementDataWidget'))()
                };
                PreferentialProcurementDashboardApi.Save(data);  
            }  
    }



        self.DashboardEdit = ko.computed({
            read: function () {
                var text = 'Customise your dashboard';

                if (!self.EnableScorecardFeatures()) {
                    text = 'This feature is currently unavailable for this scorecard type';
                } else {
                    if (!self.HasDocumentsRole()) {
                        text = 'You do not have sufficient rights to access the Supporting Documents view';
                    }
                }

                return text;
            }
        });

Solution

i think you can take advantage of the visible binding to show/hide the button based on your criteria

function PageViewModel() {
  var self = this;
  self.buttonVisible = ko.observable(true);
  self.changeButtonText = function() {
    self.ProcurementbuttonText(!self.ProcurementbuttonText());
  }
  self.ProcurementbuttonText = ko.observable(false);
  self.buttonText = ko.pureComputed(function() {
    return self.ProcurementbuttonText() ? "Save" : "Edit";
  });
  self.isButtonVisible = ko.computed(function() {
    //do some your logic here.  just need to return a true or false value;
    return self.buttonVisible();
  });

  self.labelText = ko.pureComputed(function() {
    var messageStart = "click to ";
    var state = self.buttonVisible() ? 'hide' : 'show';
    var messageEnd = " button";

    return messageStart + state + messageEnd;

  });
}

ko.applyBindings(new PageViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText, visible: isButtonVisible, text: buttonText">
Click me.
</button>
<br/>
<br/>
<label><span data-bind="text: labelText " ></span>
  <input type="checkbox" data-bind="checked: buttonVisible" />
</label>