How to get dynamically generated ID (JS or Jquery)?

Question

I want to open several Poup-up and be able to close each one individually, but I can only get the modal by the class, because the id is generated dynamically and I haven’t tried several ways to get the function to work, but nothing. In the code shows the closing working because when clicking picks by the class, but then closes all opened and not only the corresponding.

Look at the code here https://jsfiddle.net/rgcriativo/kvnrj5x9/3/

$(document).ready(function(){
    $(".btn-abrirModal").click(function(){
        var id = $(this).attr("id");
        var conteudo = $(this).attr("title");
        $(".area-modal").append("<div id='modalid" + id + " ' class='modalm'><section>" + conteudo + "</section><button onclick='fecharModal()' id='fecharModal" + id + "' class='btn-fecharModal'>fechar</button></div>");        
        $("#" + id).css("background-color", "red").css("color", "white").attr('disabled', 'disabled');
    });    
});

function fecharModal() {
    $(".modalm").remove();
  }

.modalm{
    margin-top: 30px;
    padding: 10px;
    position: fixed;
    width: 50%;
    height: 50%;
    background-color: #ededed;
    border-radius: 10px;
    border: 1px solid #CCC;
    margin-left:25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="01" class="btn-abrirModal" title="Conteúdo do Modal 1">Modal 1</button>
<button id="02" class="btn-abrirModal" title="Conteúdo do Modal 2">Modal 2</button>
<button id="03" class="btn-abrirModal" title="Conteúdo do Modal 3">Modal 3</button>
<button id="04" class="btn-abrirModal" title="Conteúdo do Modal 4">Modal 4</button>
<button id="05" class="btn-abrirModal" title="Conteúdo do Modal 5">Modal 5</button>
<button id="06" class="btn-abrirModal" title="Conteúdo do Modal 6">Modal 6</button>

<span class="area-modal"></span>

Answer 1

You can pass the function fecharModal which element is being clicked, and through this close only the modal where it is.

In this case, when adding the modal, the function called in the onclick can pass the element itself button as a parameter.

$(".area-modal").append("<div id='modalid" + id + " ' class='modalm'><section>" + conteudo + "</section><button onclick='fecharModal(this)' id='fecharModal" + id + "' class='btn-fecharModal'>fechar</button></div>");

And in function fecharModal, a small modification allows closing only the modal for the button clicked. The complete code would look like this:

$(document).ready(function(){
    $(".btn-abrirModal").click(function(){
        var id = $(this).attr("id");
        var conteudo = $(this).attr("title");
        $(".area-modal").append("<div id='modalid" + id + " ' class='modalm'><section>" + conteudo + "</section><button onclick='fecharModal(this)' id='fecharModal" + id + "' class='btn-fecharModal'>fechar</button></div>");        
        $("#" + id).css("background-color", "red").css("color", "white").attr('disabled', 'disabled');
    });    
});

function fecharModal(element) {
  $(element).parents(".modalm").remove();
}

.modalm{
    margin-top: 30px;
    padding: 10px;
    position: fixed;
    width: 50%;
    height: 50%;
    background-color: #ededed;
    border-radius: 10px;
    border: 1px solid #CCC;
    margin-left:25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="01" class="btn-abrirModal" title="Conteúdo do Modal 1">Modal 1</button>
<button id="02" class="btn-abrirModal" title="Conteúdo do Modal 2">Modal 2</button>
<button id="03" class="btn-abrirModal" title="Conteúdo do Modal 3">Modal 3</button>
<button id="04" class="btn-abrirModal" title="Conteúdo do Modal 4">Modal 4</button>
<button id="05" class="btn-abrirModal" title="Conteúdo do Modal 5">Modal 5</button>
<button id="06" class="btn-abrirModal" title="Conteúdo do Modal 6">Modal 6</button>

<span class="area-modal"></span>