如何消除我的两个Bootstrap模态屏幕重叠的冲突？

I have two bootstrap Modals in the same page, even they have different id's the first Modal in the line open correctly but bring the second overlapped. If I invert the second Modal works fine but with the first one overlapped.

I had a similar issue before where I correct the id's and clean up the unnecessary 's. However now, I have checked everything from the start t the end and still overlapping. Should be something very stupid, but because my inexperience I don't find.

These are the lines that trigger my two modals: -First one

<td>
<form>
<a href="#Participants" rel="ck_mdal" id="participants" value="participants" name="participants" class="btn btn-success pfetch_data">Participants</a>
</form>
</td>

-And this second one

echo "<td>";
    echo "<a href='#PCR' rel='ck_mdal' name='edit' value='edit' id='".$row['PCRNo']."' class='fetch_data'>".$row['PCRNo']."</td>";

Below you can see my Modals headings: -Second One:

<div class="modal fade" role="dialog" id="dataModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style="color:white">PCN View & Update</h4>
        </div>
        <div class="modal-body">

-And the first One:

<div class="modal fade" role="dialog" id="pdataModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style="color:white">Participants</h4>
        </div>
        <div class="modal-body">

And these are the Scripts that start my Modals after information come from the fetch file. -The First Modal:

$('#ptable').on('click', '.pfetch_data', function(){

        $.ajax({
          url:'pfetch.php',
          dataType:"json",
          success:function(data){
            $('#p1').val(data.P1);     
            $('#pdataModal').modal('show');

          }
        });
      });

-And the second One:

$('#table').on('click', '.fetch_data', function(){
          var pcr_number = $(this).attr('id');

          $.ajax({
            url:'fetch.php',
            method:'post',
            data:{pcr_number:pcr_number},
            dataType:"json",
            success:function(data){
            $('#PCR').val(data.PCRNo);
            $('#dataModal').modal('show');

            }
          });
        });

As I said if I put the first Modal in front of the second only the first Modal works and the second overlap, if I invert the sequence inside the code, the second Modal works and the first overlap. So I know the fetch and other things are OK, only I need to find out how to fix the overlapping.