JQuery update data-id attribute

Hello,

I have a JQuery script that dynamically enters data into a form; the script is -

        $("#AddWorkHistory a.add").click(function () {
            $('#job_description').removeClass("editworkhistory");
            $('#job_description').addClass("addworkhistory");

            tinymce.init({
                selector: "textarea.addworkhistory",
                toolbar1: "paste | bold italic underline  | alignleft aligncenter alignright alignjustify | bullist numlist | ",

                menubar: false,
                toolbar_items_size: 'small',
                paste_as_text: true,
                browser_spellcheck: true,
                statusbar: false,
                height: 400,

                style_formats: [{
                    title: 'Bold text',
                    inline: 'b'
                }, ],

            });
            $('#Edit_Personal_Statement').hide();
            $('#Edit_Work_History').hide();
            $('#Edit_Qualifications').hide();
            $('#Edit_Covering_Letter').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();$('#CVs').hide();$('#Skills_Expertise').hide();
            $('#Availability').hide();
            $('#Work_History').show();
        });

Select allOpen in new window

It is triggered when the link is clicked -

<a href="#" class="editlinks" data-id="12" data-jobtitle="developer" data-company="ims" data-startdate="" data-enddate="" data-description="lorem ipsum...." style="font-size:12px; float:right; width:40px; text-align:right">Edit</a>

Select allOpen in new window

The form that it updates is

<form method="post" id="Edit_Work_History" title="Work History">
      <h3>Work History</h3>
      <label for="start_date">Dates From:</label>
      <input name="start_date" type="date" required="required" id="Edit_start_date" class="datepicker">
      <label for="end_date" class="labelindent">To:</label>
      <input name="end_date" type="date" required="required" id="Edit_end_date" class="datepicker">
      <br />
      <label for="Job_Title">Job Title:</label>
      <input name="Job_Title" type="text" required="required" id="Edit_Job_Title" placeholder="e.g. Java Developer" maxlength="255">
      <br />
      <label for="Company">Company:</label>
      <input name="Company" type="text" required="required" id="Edit_Company" maxlength="255">
      <br />
      <textarea name="job_description" rows="20" id="Edit_job_description"></textarea>
      <input name="Work History" type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
      <input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">
      <input name="EditWorkHistoryID" type="hidden" id="EditWorkHistoryID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryUserID" type="hidden" id="EditWorkHistoryUserID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryAuth" type="hidden" id="EditWorkHistoryAuth" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Authentication"))%>">
      <input type="hidden" name="WID" id="WID">
    </form>

Select allOpen in new window

Which contains a button - which when clicked opens a fancy box form...

<input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">

Select allOpen in new window

I need to dynamically update the data-id attribute of this button, based on the data-id attribute of the original link clicked...

Is this possible?

Thoughts appreciated.

Thank you