my onlcik functions editing every div with same id, how to make it edit only its own (or parent div)?

Question

i am creating fied where user adds data and can edit or remove it but on clicking on edit, all other entries remain same and only the top entry becomes editable. However i want that when a user clicks on edit button then he must edit only that div's element and not effect anyother eement elsewhere.

for this purpose i am using this code:

    const fullname = $('#fname').val()
    if (fullname.length) {
        $('#profileCard').append('<div id="show-data"><div class="col-6 f-left"><input type="" id="fname-edit" class="input-add" value="' + fullname + '" readonly ></div><div class="col-6 f-left"><button type="button" id="remove-data" class="add-data" onclick="conv_file_document_remove()">Remove</button><button type="button" class="add-data" id="edit-data" onclick="conv_file_edit_enabled()">Edit</button><button type="button" class="add-data" id="save-data" onclick="conv_file_edit_disabled()" style="display:none">Save</button></div><div class="f-clear"></div></div>');
        $('#data')[0].reset();
    }
});

/**
* 
* Editing file enable
* 
*/
function conv_file_edit_enabled(){ 
    document.getElementById('fname-edit').readOnly = false;
    $("#fname-edit").addClass("activated");
    document.getElementById("save-data").style.display = "initial";
    document.getElementById("edit-data").style.display = "none";
}

/**
* 
* Editing file disable
* 
*/
function conv_file_edit_disabled(){ 
    document.getElementById('fname-edit').readOnly = true;
    $("#fname-edit").removeClass("activated");
    document.getElementById("save-data").style.display = "none";
    document.getElementById("edit-data").style.display = "initial";
}

/**
* 
* Removing file name and document
* 
*/
function conv_file_document_remove(){
    $('#show-data').remove();
}

html

    <div class="module_title_bg">
        <h1 class="module_title">Create a list of file names</h1>
        <form id="data">
         <label>Add new file</label><br/>
          <div class="col-6 f-left">
            <input type="" class="input-add" id="fname" placeholder="Enter File Name" required>
          </div>
        </form>
        <div class="col-6 f-left">
          <button type="button" class="popup add-data" data-trigger="focus">Add</button>
        </div>
    </div>
    <div class="module_body_bg">

        <div class="f-clear">
            <p>List of file names</p>
             <div id="profileCard">

            </div>
        </div>
    </div>
</div> 

this code enables editing on the top entry and not the selected fileds entry. No metter what edit button i click, i'm getting this as seen in image only 1st or i should say the toppest field edits:

Please see refrence image here