Why are my read more buttons not working?-CodePudding

I have a meet the team page created, I had the read more buttons working but they have broke on me and I am unsure how to fix them. I believe it might be just one or two lines of code that might need changing.

I have posted the code snippet down below, the JavaScript should be fine, the issue most likely lies in the HTML as I updated that and they broke later on.

// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i  ) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i  ) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}

/**
{
    margin: 0;
    padding: 0;
    font-family: Verdana,Geneva,sans-serif; 
}*/

.team-section
{
    background: #f1f2f6;
    text-align: center;
}

.inner-width
{
    max-width: 1200px;
    margin: auto;
    padding: 40px;
    color: #333;
    overflow: hidden;
}

.team-section h1
{
    font-size: 20px;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 4px solid;
    padding-bottom: 10px;
}

.pe
{
    float: left;
    width: calc(100% / 3);
    overflow: hidden;
    padding: 40px 0;
    transition: 0.4s;
}

.pe:hover
{
    background: #dfe4ea;
}

.pe img
{
    width:250px;
    height: 250px;
    border-radius: 50%;
        
}

.p-name
{
    margin: 5px;
    text-transform: uppercase;
        color: #70AD47;
}

.p-des
{
    font-style: italic;
    color: #006600;
}

.p-sm
{
    margin-top: 16px;
}

.p-sm a
{
    margin: 0 4px;
    display: inline-block;
    width: 30px;
    height: 30px;
    transition: 0.4s;
}

.p-sm a:hover
{
    transform: scale(1.3);
}

.p-sm a i
{
    color: #333;
    line-height: 30px;
}

@media screen and (max-width: 960px) {
    .pe{
        width: 45%;
    }
}
@media screen and (max-width: 768px) {
    .pe{
        width: 50%;
    }
}
@media screen and (max-width: 600px) {
    .pe{
        width: 100%;
    }
}

:root {
  --modal-duration: 1s;
  --modal-color: #70AD47;
}

.button {
  background: #006600;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 10% auto;
  width: 60%;
  box-shadow: 0 5px 8px 0 rgba(112, 173, 71), 0 7px 20px 0 rgba(112, 173, 71);
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: var(--modal-color);
  padding: 15px;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.modal-footer {
  background: var(--modal-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
 transform: rotateY(360deg);
}

/* Set a specific color for each brand */

/* Linkedin */
.fab fa-linkedin {
  color: white;
}

<div class="team-section">
<div class="inner-width">
<div class="pers">
<div class="pe">

<img class="alignnone size-medium wp-image-763" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/David-full-colour-photo-2-253x300.jpg" alt="" width="253" height="300" />
<div class="p-name">David Small</div>
<div class="p-des">Director of Innovation and Strategy</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal2" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>David Small</h2>
</div>
<div class="modal-body">

“David Small is the founder and Managing Director here at Patient Guard Group. Since graduating in 2004, David has went on to gain post graduate degrees and worked in the Life Science and Medical Device Industry, David worked for the MHRA as a Higher Medical Device Specialist and with Industry in QA, RA and Project Leader Roles, helping to develop Medical Devices and gain regulatory approval for them. In 2017 David spotted an opportunity in the market for a no nonsense approach to Medical Device consulting, reducing technical jargon and making QA and RA easy to understand to business owners and businesses who manufacture, distribute or own label Medical Devices, and hence Patient Guard was born. Since then we have grown to a team of 6 and have in 2021 opened an office in Germany. This helps us to provide a full regulatory service for medical device manufacturers in the EU and the UK for both CE marking and UKCA marking. We aim to be a one stop shop for Medical Device compliance needs”.

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-757" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Paul-full-colour-photo-2-267x300.jpg" alt="" width="267" height="300" />
<div class="p-name">Paul Mccann</div>
<div class="p-des">Finance Director</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal1" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Paul Mccann</h2>
</div>
<div class="modal-body">

Paul is the finance director at Patient Guard Ltd.

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-748" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Bev-full-colour-photo-Copy-292x300.jpg" alt="" width="292" height="300" />
<div class="p-name">Beverley Evans</div>
<div class="p-des">Head of Operations</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal3" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Beverley Evans</h2>
</div>
<div class="modal-body">

Beverley is the head of operations at Patient Guard Ltd.

“ I currently hold the position of Head of Operations here at Patient Guard. Over the years I have held various Supervisory and Management positions gained in both Retail and Administration. I focus on ensuring the finance administration and operation of the business run smoothly, and love being part of a family orientated business”

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-761" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Steve-full-colour-photo-2-248x300.jpg" alt="" width="248" height="300" />
<div class="p-name">Steve Condie</div>
<div class="p-des">Regulatory Manager</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal4" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Steve Condie</h2>
</div>
<div class="modal-body">

Steve has been involved in Toxicology for most of his working life, specialising in LD50 Testing along with Pyrogen Testing. Other experience in Toxicology testing includes Systemic Toxicity, Skin Irritation and Skin Sensitisation to USP Class VI and ISO 10993 standards. During this time Steve rose to Section Head of the department and produced and held several Home Office Project Licences for the work carried out in the laboratory, including the Medical Device Project Licence.
Steve joined Patient Guard in 2021 as a Senior Associate and his enthusiasm and passion for customers in assisting getting their devices to market in a timely manner suits the company well. Steve specialises in Technical Files and the writing of Biological Evaluation Reports.

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-755" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Laura-full-colour-photo-2-300x300.jpg" alt="" width="300" height="300" />
<div class="p-name">Laura McVittie</div>
<div class="p-des">Quality Manager</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal5" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Laura McVittie</h2>
</div>
<div class="modal-body">

‘’Laura is qualified to degree level in Forensic and Applied Science, with additional higher-level studies in microbiology and biotechnology. Since graduation she has worked across a wide range of industries with scientific based roles in healthcare, administrative, manufacturing, and educational settings and had experience working in project management and coordination roles. Laura has over 8 years’ experience working within, BRC, FSA, GMP/ GLP, ISO 9001 and UKAS accredited laboratories in multidisciplinary, research support, technical support, QC and QA roles. She now works for Patient Guard Ltd as a Quality Manager and offers consultancy services for ISO 13485 QMS implementation/ accreditation and provides internal auditing services for the medical device industry.’’

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-759" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Joe-full-colour-photo-2-261x300.jpg" alt="" width="261" height="300" />
<div class="p-name">Joe Whittaker</div>
<div class="p-des">Business Development Manager</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal6" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Joe Whittaker</h2>
</div>
<div class="modal-body">

‘Joe has worked within business development, sales, and marketing industry for the past 10 years. Since graduating with a postgraduate degree in Nutrition from Liverpool John Moore’s University, Joe worked as a Personal Trainer and Nutritionist for 4/5 years. This involved business development/planning, understanding the market, marketing and client relationship building through communication and understanding. Joe’s dedication for delivering professional services that clients require has always been his biggest passion. At the beginning of 2021, Joe transferred his skills in; Client communication, understanding client requirements and wanting to push his business development/sales skills further into a different industry, where he became a part of the Patient Guard, working within medical device regulatory affairs and quality assurance. Joe works with potential clients and current clients on understanding and communicating the correct services the client requires to place their medical device on the EU or UK market in a clear, concise and precise manner.’

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
<div class="pe">

<img class="alignnone size-medium wp-image-765" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Connor-full-colour-photo-2-261x300.jpg" alt="" width="261" height="300" />
<div class="p-name">Connor Campbell</div>
<div class="p-des">Digital Marketing Assistant</div>
<!-- Trigger/Open The Modal -->
<p style="text-align: center;"><button class="modal-button">Read More</button></p>
<!-- The Modal -->
<div id="myModal7" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Connor Campbell</h2>
</div>
<div class="modal-body">

Connor is the digital marketing assistant at Patient Guard Ltd.

</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
&nbsp;

<form><input type="button" value="Go back!" /></form></div>
</div>
</div>

CodePudding user response：

You need to delegate

the buttons do not have any href

Here is how to show and close.

const container = document.querySelector(".pe");
const modals = container.querySelectorAll(".modal");
container.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("modal-button")) {
    const modal = tgt.closest("p").nextElementSibling;
    modal.style.display = "block";
  }
  if (tgt.classList.contains("close")) {
    tgt.closest(".modal").style.display = "none";
  }
});
document.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.closest(".modal-content")) return; // inside the modal 
  if (tgt.classList.contains("modal-button"))  return; // clicking the trigger
  modals.forEach(modal => modal.style.display = "none");
})

/**
{
    margin: 0;
    padding: 0;
    font-family: Verdana,Geneva,sans-serif; 
}*/

.team-section {
  background: #f1f2f6;
  text-align: center;
}

.inner-width {
  max-width: 1200px;
  margin: auto;
  padding: 40px;
  color: #333;
  overflow: hidden;
}

.team-section h1 {
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 4px solid;
  padding-bottom: 10px;
}

.pe {
  float: left;
  width: calc(100% / 3);
  overflow: hidden;
  padding: 40px 0;
  transition: 0.4s;
}

.pe:hover {
  background: #dfe4ea;
}

.pe img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.p-name {
  margin: 5px;
  text-transform: uppercase;
  color: #70AD47;
}

.p-des {
  font-style: italic;
  color: #006600;
}

.p-sm {
  margin-top: 16px;
}

.p-sm a {
  margin: 0 4px;
  display: inline-block;
  width: 30px;
  height: 30px;
  transition: 0.4s;
}

.p-sm a:hover {
  transform: scale(1.3);
}

.p-sm a i {
  color: #333;
  line-height: 30px;
}

@media screen and (max-width: 960px) {
  .pe {
    width: 45%;
  }
}

@media screen and (max-width: 768px) {
  .pe {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .pe {
    width: 100%;
  }
}

:root {
  --modal-duration: 1s;
  --modal-color: #70AD47;
}

.button {
  background: #006600;
  padding: 1em 2em;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 10% auto;
  width: 60%;
  box-shadow: 0 5px 8px 0 rgba(112, 173, 71), 0 7px 20px 0 rgba(112, 173, 71);
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header h2,
.modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: var(--modal-color);
  padding: 15px;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.modal-footer {
  background: var(--modal-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Style all font awesome icons */

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}


/* Add a hover effect if you want */

.fa:hover {
  transform: rotateY(360deg);
}


/* Set a specific color for each brand */


/* Linkedin */

.fab fa-linkedin {
  color: white;
}

<div class="team-section">
  <div class="inner-width">
    <div class="pers">
      <div class="pe">

        <img class="alignnone size-medium wp-image-763" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/David-full-colour-photo-2-253x300.jpg" alt="" width="253" height="300" />
        <div class="p-name">David Small</div>
        <div class="p-des">Director of Innovation and Strategy</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal2" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>David Small</h2>
            </div>
            <div class="modal-body">

              “David Small is the founder and Managing Director here at Patient Guard Group. Since graduating in 2004, David has went on to gain post graduate degrees and worked in the Life Science and Medical Device Industry, David worked for the MHRA as a Higher
              Medical Device Specialist and with Industry in QA, RA and Project Leader Roles, helping to develop Medical Devices and gain regulatory approval for them. In 2017 David spotted an opportunity in the market for a no nonsense approach to Medical
              Device consulting, reducing technical jargon and making QA and RA easy to understand to business owners and businesses who manufacture, distribute or own label Medical Devices, and hence Patient Guard was born. Since then we have grown to
              a team of 6 and have in 2021 opened an office in Germany. This helps us to provide a full regulatory service for medical device manufacturers in the EU and the UK for both CE marking and UKCA marking. We aim to be a one stop shop for Medical
              Device compliance needs”.

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-757" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Paul-full-colour-photo-2-267x300.jpg" alt="" width="267" height="300" />
        <div class="p-name">Paul Mccann</div>
        <div class="p-des">Finance Director</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal1" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Paul Mccann</h2>
            </div>
            <div class="modal-body">

              Paul is the finance director at Patient Guard Ltd.

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-748" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Bev-full-colour-photo-Copy-292x300.jpg" alt="" width="292" height="300" />
        <div class="p-name">Beverley Evans</div>
        <div class="p-des">Head of Operations</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal3" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Beverley Evans</h2>
            </div>
            <div class="modal-body">

              Beverley is the head of operations at Patient Guard Ltd. “ I currently hold the position of Head of Operations here at Patient Guard. Over the years I have held various Supervisory and Management positions gained in both Retail and Administration. I focus
              on ensuring the finance administration and operation of the business run smoothly, and love being part of a family orientated business”

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-761" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Steve-full-colour-photo-2-248x300.jpg" alt="" width="248" height="300" />
        <div class="p-name">Steve Condie</div>
        <div class="p-des">Regulatory Manager</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal4" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Steve Condie</h2>
            </div>
            <div class="modal-body">

              Steve has been involved in Toxicology for most of his working life, specialising in LD50 Testing along with Pyrogen Testing. Other experience in Toxicology testing includes Systemic Toxicity, Skin Irritation and Skin Sensitisation to USP Class VI and
              ISO 10993 standards. During this time Steve rose to Section Head of the department and produced and held several Home Office Project Licences for the work carried out in the laboratory, including the Medical Device Project Licence. Steve
              joined Patient Guard in 2021 as a Senior Associate and his enthusiasm and passion for customers in assisting getting their devices to market in a timely manner suits the company well. Steve specialises in Technical Files and the writing
              of Biological Evaluation Reports.

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-755" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Laura-full-colour-photo-2-300x300.jpg" alt="" width="300" height="300" />
        <div class="p-name">Laura McVittie</div>
        <div class="p-des">Quality Manager</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal5" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Laura McVittie</h2>
            </div>
            <div class="modal-body">

              ‘’Laura is qualified to degree level in Forensic and Applied Science, with additional higher-level studies in microbiology and biotechnology. Since graduation she has worked across a wide range of industries with scientific based roles in healthcare,
              administrative, manufacturing, and educational settings and had experience working in project management and coordination roles. Laura has over 8 years’ experience working within, BRC, FSA, GMP/ GLP, ISO 9001 and UKAS accredited laboratories
              in multidisciplinary, research support, technical support, QC and QA roles. She now works for Patient Guard Ltd as a Quality Manager and offers consultancy services for ISO 13485 QMS implementation/ accreditation and provides internal auditing
              services for the medical device industry.’’

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-759" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Joe-full-colour-photo-2-261x300.jpg" alt="" width="261" height="300" />
        <div class="p-name">Joe Whittaker</div>
        <div class="p-des">Business Development Manager</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal6" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Joe Whittaker</h2>
            </div>
            <div class="modal-body">

              ‘Joe has worked within business development, sales, and marketing industry for the past 10 years. Since graduating with a postgraduate degree in Nutrition from Liverpool John Moore’s University, Joe worked as a Personal Trainer and Nutritionist for 4/5
              years. This involved business development/planning, understanding the market, marketing and client relationship building through communication and understanding. Joe’s dedication for delivering professional services that clients require
              has always been his biggest passion. At the beginning of 2021, Joe transferred his skills in; Client communication, understanding client requirements and wanting to push his business development/sales skills further into a different industry,
              where he became a part of the Patient Guard, working within medical device regulatory affairs and quality assurance. Joe works with potential clients and current clients on understanding and communicating the correct services the client
              requires to place their medical device on the EU or UK market in a clear, concise and precise manner.’

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="pe">

        <img class="alignnone size-medium wp-image-765" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Connor-full-colour-photo-2-261x300.jpg" alt="" width="261" height="300" />
        <div class="p-name">Connor Campbell</div>
        <div class="p-des">Digital Marketing Assistant</div>
        <!-- Trigger/Open The Modal -->
        <p style="text-align: center;"><button class="modal-button">Read More</button></p>
        <!-- The Modal -->
        <div id="myModal7" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header"><span class="close">×</span>
              <h2>Connor Campbell</h2>
            </div>
            <div class="modal-body">

              Connor is the digital marketing assistant at Patient Guard Ltd.

            </div>
            <div class="modal-footer">
              <h3></h3>
            </div>
          </div>
        </div>
      </div>
      &nbsp;

      <form><input type="button" value="Go back!" /></form>
    </div>
  </div>
</div>