Clone parent element when you click the button

Bootstrap4, JQuery, SASS (SCSS)

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">

<div class="container-fluid pt-5 studies">
  <section id="language" class="pl-3 pr-3">
    <div class="form-group row">
      <label for="langTitle" class="col-sm-4 col-form-label text-white font-weight-bold">Nyelvtudás:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="langTitle" placeholder="Angol">
      </div>
    </div>
    <div class="form-group row">
      <label for="langLevel" class="col-sm-4 col-form-label text-white font-weight-bold">Nyelvtudás szintje:</label>
      <div class="col-sm-6">
        <select class="form-control" id="langLevel">
          <option>alap szint</option>
          <option>társalgási szint</option>
          <option>tárgyalóképes szint</option>
          <option>anyanyelvi szint</option>
        </select>
      </div>
    </div>
    <div class="prod-card-hr pt-3 pb-3">
      <hr>
    </div>
  </section>
  <section class="pl-3 pr-3">
    <div class="row">
      <div class="col-sm-12">
        <button type="button" class="btn text-white more-buttons" data-parent="studies"><img src="{{ asset('assets/img/profile/.png') }}" 
        alt="További nyelvek"><span class="pl-3 font-weight-bold">További nyelvek megadása</span></button>
      </div>
    </div>
    <div class="prod-card-hr pt-3 pb-3">
      <hr>
    </div>
  </section>
</div>

SCSS

$bg-green: #008da9;
$white: white;

.container-fluid {
  background-color: $bg-green;
  hr {
  background-color: $white;
  opacity: 0.5;
  }
}

JavaScript

$(function (){
    var moreBtn = $('.more-buttons');
    moreBtn.on('click', function(){
        let parent = $(this).data('parent');
        let parentSection = ($('section.'+parent));
        parentSection.after(parentSection.clone().first());
    });
});