Profile page: create studies block

Bootstrap,jQuery

by Zsanett Tamás

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<section class="studies"></section>

<section>
  <div class="row bg-dark text-white">
    <div class="col-sm-12">
      <button type="button" class="more-studies-btn btn text-white" data-parent="studies"><img class="img-fluid" src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Add-512.png" alt="További tanulmányok" width="50" >
      <span class="pl-3 font-weight-bold">További tanulmányok megadása</span>
      </button>
    </div>
  </div>
  <div class="prod-card-hr pt-3 pb-3">
    <hr>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

JavaScript

// Profile page: create studies block
let studies = 1;

function cloneMoreStudies() {
  let moreBtn = $('.more-studies-btn');
  moreBtn.on('click', function() {
    createStudyBlock(studies);
    studies++;
  });
}

function createStudyBlock(number) {
  if (number < 2) {
    $('section.studies').html('' +

      '<div class="form-group row pb-3 study">' +
      '<label class="col-sm-6 col-form-label">További végzettségek:</label>' +
      '<div class="col-sm-6 pl-0">' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input" id="vocational_' + number + '">' +
      '<label class="custom-control-label" for="vocational_' + number + '">Szakmunkásképző</label>' +
      '</div>' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input" id="vocationalSecondary_' + number + '">' +
      '<label class="custom-control-label" for="vocationalSecondary_' + number + '">Szakközépiskola</label>' +
      '</div>' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input" id="highSchool_' + number + '">' +
      '<label class="custom-control-label" for="highSchool_' + number + '">Gimnázium</label>' +
      '</div>' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input" id="okjSecondary_' + number + '">' +
      '<label class="custom-control-label" for="okjSecondary_' + number + '">OKJ (középfokú)</label>' +
      '</div>' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input" id="okjSuperlative_' + number + '">' +
      '<label class="custom-control-label" for="okjSuperlative_' + number + '">OKJ (felsőfokú)</label>' +
      '</div>' +
      '<div class="custom-control custom-checkbox pt-2">' +
      '<input type="checkbox" class="custom-control-input"...