---
# System prepended metadata

title: Cách làm mỗi modal ứng với mỗi phần tử

---

Cách làm mỗi modal ứng với mỗi phần tử
===

## Cách 1:

```javascript=
<section id="section-recurement">
    {% set tuyenDungs = Recurements() %};
    <div class="recruiement">
        {% for item in tuyenDungs %}
            <div class="job-title" data-id="{{loop.index0}}">{{item.title}}</div>           
        {% endfor %}
    </div>

    {% for item in tuyenDungs %}
        <div class="modal" id="modal-recurement-{{loop.index0}}">
            <div class="modal-title">{{item.title}}</div>
            <div class="modal-content">{{item.content}}</div>
        </div>
    {% endfor %}
</section>


<script>
    $('.job-title').click(function() {
        var id = $(this).data('id');
        var selector = '#modal-recruiement-' + id;
        $(selector).modal()    
    })
</script>

```

---

## Cách 2:
```javascript=
<section id="section-recurement">
    {% set tuyenDungs = Recurements() %};
    <div class="recruiement">
    {% for item in tuyenDungs %}
        <div class="job-title" data-conent="{{item.content}}">{{item.title}}</div>           
    {% endfor %}
    </div>
    <div class="modal" id="modal-recurement">
        <div class="modal-title"></div>
        <div class="modal-content"></div>
    </div>
</section>


<script>
    $('.job-title').click(function() {
        var title = $(this).text();
        var content = $(this).data('content');
        $("#modal-recurement .modal-title").text(title); 
        $("#modal-recurement .modal-content").text(content); 
        $("#modal-recurement").modal()    
    })
</script>

```

---

## Cách 3:
```javascript=
<section id="section-recurement">
    {% set tuyenDungs = Recurements() %};
    <div class="recruiement">
    {% for item in tuyenDungs %}
        <a href="javascript:;" onclick="showRecruimentModal({{loop.index0}})">
            <div class="job-title">{{item.title}}</div>           
        </a>
    {% endfor %}
    </div>
    <div class="modal" id="modal-recurement">
        <div class="modal-title"></div>
        <div class="modal-content"></div>
    </div>
</section>


<script>
    var recruiement = {{tuyenDungs | json_encode | raw}};
    funtion showRecruimentModal(index){
        var item = recruiement[index];
        $("#modal-recurement .modal-title").text(item.title); 
        $("#modal-recurement .modal-content").text(item.content); 
        $("#modal-recurement").modal()    
    }
</script>


```