Как изменить содержимое <p>на основе <div>имени?

Question

В настоящее время я создаю веб-приложение. Одна из функций состоит в том, чтобы позволить пользователям создать элемент div и назначить ему метку, которая будет добавлена ​​в класс. Имя метки будет отображаться сбоку на основе имя класса div. Проблема в том, что я хочу изменить имя метки при изменении имени класса. Я не могу изменить метку только для одного, если у меня несколько div.

Я использую event.target, чтобы получить нажатие, но если щелкнуть 2 деления по отдельности, оба будут выбраны, и имя обоих классов изменится.

//assign label and display it on the sides
$("#boxContain").click(function (event) {
console.log(event.target.nodeName);

$("#labels").on("change", function () {
    var modal = document.getElementById('lblList');
    if ($(event.target).attr('name') == null) {
        var e = document.getElementById("labels");
        var strUser = e.options[e.selectedIndex].text;
        console.log(strUser);

        var btn = document.getElementById("submitLbl"); //get submit btn
        btn.onclick = function () {
            event.target.setAttribute('name', strUser); //set the div name to the label
            $(event.target).addClass(strUser);


            var p = document.createElement("p");
            $(p).text(strUser);
            $(p).attr('id', strUser);
            $(p).attr('class', 'lbl');
            $(p).addClass(strUser);
            $("#existingLbl").append(p);
            modal.style.display = "none";

            $('#labels')[0].selectedIndex = 0;

        }

    } else {
        event.target.removeAttribute('ondblclick');
    }
});

});
//Edit labels
function edit(e) {
var classname = e.className.split(' ')[4];
return classname;
};
$('#createBoxBtn').click(function () {
$('.box').click(function () {
    var currentLbl = edit(this);
    console.log(currentLbl);
    var element = this;
    $('#editLblBtn').on('click', function () {
        document.getElementById('errorMessage').style.display = "none";
        var modal = document.getElementById('lblList');
        var span = document.getElementsByClassName("close")[0];
        var btn = document.getElementById('submitLbl');
        var edit = document.getElementById('editLbl');
        btn.style.display = "none";
        edit.style.display = "block";
        modal.style.display = "block";
        $('#labels').on('change', function () {
            var list = document.getElementById("labels");
            var newLbl = list.options[list.selectedIndex].text;
            $(edit).on('click', function () {
                var p = document.getElementById(currentLbl);
                if ($(p).attr('id') == currentLbl) {
                    $(p).text(newLbl);
                    $(p).removeClass(currentLbl);
                    $(p).addClass(newLbl);
                    $(p).attr('id', newLbl);
                    $(element).removeClass(currentLbl);
                    $(element).addClass(newLbl);
                    $(element).attr('name', newLbl);
                    $('#labels')[0].selectedIndex = 0;
                } else if ($(p).attr('id') == "Copyof" + currentLbl) {
                    $(p).text(newLbl);
                    $(p).removeClass(currentLbl);
                    $(p).addClass(newLbl);
                    $(p).attr('id', 'Copyof' + newLbl);
                    $(element).removeClass(currentLbl);
                    $(element).addClass('Copyof' + newLbl);
                    $(element).attr('name', newLbl);
                    $('#labels')[0].selectedIndex = 0;
                }
            }); //end of edit
        }); //end of #labels
        span.onclick = function () {
            modal.style.display = "none";
        };
        edit.onclick = function () {
            modal.style.display = "none";

        };
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
        $('#labels')[0].selectedIndex = 0;
    }); //end of #editLblBtn
  }); //end of .box

}); //end of #createBoxBtn

Когда я редактирую метку, имя класса И имя div должно измениться на новую метку, а также должен измениться и соответствующий тег p. Что мне нужно сделать для этого? Есть ли способ очистить данные, сохраненные в событии, когда Я нажимаю на разные элементы?