JQuery .data('val') return undefined

I have a window that have to manage multiple forms that are created and added with JQuery and I have a Map that store some data for each form. I store these data with my form 'unid'. My problem is that can not get the unid in an other function so I can not use my Map;

<form id="form_230-03654865">
  <div class="contactInfo form-row">
    <div class="col-md-12 input-group input-group-sm mb-1">
      <div class="input-group-append"><button class="btn btn-danger" type="button" id="unlockBtn">Modifier</button></div>
    </div>
  </div>
</form>

my client JS file

const pug = require('pug');
const path = require('path');
const template = {
    form: pug.compileFile(path.join(__dirname, '/partials/new-inter.pug'));
}

const formsData = new Map();

function addNewFormOnUI(info) {
    const $form = $(template.form(info));

    $form.data('unid', info.unid);
    $form.find('[id=unlockBtn]').on('click', unlock);

    // append the form

    formsData.set(info.unid, 'something');

    console.log($form.data('unid')) // ==> log '230-03654865'
}

function unlock(event) {
    // here $(this) is the id="unlockBtn" button
    const $form = $(this).parents('form');
    const id = $form.data('unid');

    console.log('id', id);                  // ==> log 'undefined'
    //const data = formsData.get(id.spliy('_')[1]);
}