Javascript Edit-Delete Function from a looped Textbox with Values

I am new to web development and I am trying to add an add/edit/delete function to my displayed form values using Javascript. Well, I cant really find the words to explain but this is what Im trying to accomplish.

I have this loop that lists discounts from a database:

@foreach (var discount in Model.Discounts)
            {
                <div class="editor-label">
                    <label for="@discount.Key.DiscountCode">@discount.Key.DiscountName</label>
                </div>
                <div class="editor-field">
                    <input class="@discount.Key.DiscountCode" name="@discount.Key.DiscountCode" readonly="true" type="text" />
                    <a class="remove" data-key="@discount.Key.DiscountCode" href="javascript:void(0);">Remove</a>
                    <a class="edit" data-key="@discount.Key.DiscountCode" href="javascript:void(0);">Edit</a>
                </div> <br />
            }

<a class="add-discount"  href="javascript:void(0);">Add Discount</a>

As you can imagine this will loop into this kind of output:

Label1 [Textbox for Label1] Delete Edit

Label2 [Textbox for Label2] Delete Edit

Label3 [Textbox for Label3] Delete Edit

How can I make these commands work using javascript/jquery.

Please note that the delete/edit function only applies to the displayed data and not the database. what I meant is if I click Delete, it will delete its corresponding Label and Textbox from the display only and not in the database, also when Edit is clicked, it will only enable the textbox to alter the data inside it.

Any help will be greatly appreciated. Thank you so much!!



I am using Visual Studio 2013 and developing this using ASP.NET MVC4