JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind='foreach: EditProjectSocialMediaViewModels'>
    <input type="text" class='required form-control' data-bind='value: Url, hidden: Deleted, attr: { name: "EditProjectSocialMediaViewModels["+$index()+"].Url" }' /> <a href="#" data-bind="click: $root.removeSocialMediaLink,hidden: Deleted">Delete</a>

    <br />
</div>
<button data-bind='click: addSocialMediaLink'>Add Social Media Link</button>

JavaScript

function ViewModel() {
     var self = this;
     self.EditProjectSocialMediaViewModels = ko.observableArray([]);
     this.addSocialMediaLink = function () {
         self.EditProjectSocialMediaViewModels.push({
             ProjectId: 0,
             ProjectSocialMediaId: 0,
             SocialMediaType: '',
             Url: '',
             Deleted: ko.observable(false)
         });

     }.bind(this);

     self.removeSocialMediaLink = function (socialLink) {
         socialLink.Deleted(true);
     }
 }


 ko.bindingHandlers.hidden = {
     update: function (element, valueAccessor) {
         ko.bindingHandlers.visible.update(element, function () {
             return !ko.utils.unwrapObservable(valueAccessor());
         });
     }
 };

 var myViewModel = new ViewModel();

 // ko.mapping.fromJS(data, {}, myViewModel);
 ko.applyBindings(myViewModel);