JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>

  <body>
    <table>
      <tr>
        <td colspan="2" class="td-container" style="padding: 10px 10px 0 10px; -ms-border-radius: 10px; border-radius: 10px; background-color: #404952; color: white;">
          <br />
          <br />
          <hr style="border-color: #f2f2f2">
          <input type="button" class="addSection" value="افزودن بخش">
          <input type="button" class="removeSection" value="حذف بخش">
          <input type="button" class="removeAllSection" value="حذف تمام بخش ها" />
          <br id="add-repasitory">
        </td>
      </tr>
    </table>

  </body>

</html>

CSS


 *{
   direction: rtl;
 }
 .inp-form {
    border: 1px solid #ACACAC;
    color: #393939;
    height: 25px;
    padding: 6px 6px 0 6px;
    width: 186px;
    border-radius: 5px;
}
.addSection {
    cursor: pointer;
    border-radius: 10px;
    margin-right: 5px;
    padding: 10px;
    background-color: #404952;
    border: 1px solid #f2f2f2;
    color: white;
    position: relative;
    top: -30px;
}
.addSection:hover {
    background-color: #94B52C;
    transition: 0.5s;
}
.removeSection {
    cursor: pointer;
    border-radius: 10px;
    margin-right: 5px;
    padding: 10px 13px 10px 13px;
    background-color: #404952;
    border: 1px solid #f2f2f2;
    color: white;
    position: relative;
    top: -30px;
}
.removeSection:hover {
    background-color: #FCB718;
    transition: 0.5s;
}

.removeAllSection {
    cursor: pointer;
    border-radius: 10px;
    margin-right: 5px;
    padding: 10px 13px 10px 13px;
    background-color: #404952;
    border: 1px solid #f2f2f2;
    color: white;
    position: relative;
    top: -30px;
}

.removeAllSection:hover {
    background-color: #DB3622;
    transition: 0.5s;
}

.continer {
    border: 1px solid #f2f2f2;
    padding: 10px;
}
.styledselect-year {
    border: 1px solid #acacac;
    margin-right: 3px;
    padding: 3px;
    border-radius: 5px;
}

.addLink {
    cursor: pointer;
    border-radius: 5px;
    margin-top: -40px;
    padding: 10px;
    background-color: #404952;
    border: 1px solid #f2f2f2;
    color: white;
    line-height: 1px;
    transition: 0.5s;
    position: relative;
    top: -48px;
}
.addLink:hover {
    background-color: #94B52C;
    transition: 0.5s; 
}

.removeLink {
    cursor: pointer;
    border-radius: 5px;
    margin-top: -40px;
    padding: 10px;
    background-color: #404952;
    border: 1px solid #f2f2f2;
    color: white;
    line-height: 1px;
    transition: 0.5s;
    position: relative;
    top: -48px;
}
.removeLink:hover {
    background-color: #FCB718;
    transition:...

JavaScript

$(document).ready(function() {

    var count = 0;

    $(".addSection").click(function() {

        var unSelectedOption;
        unSelectedOption = $('#add-repasitory').next('.continer').find('.styledselect-year').val();
        $('#add-repasitory').next('.continer').nextAll('.continer').find('.styledselect-year').each(function() {
            $(this).children('option').each(function() {
                if ($(this).val() == unSelectedOption) {
                    $(this).remove();
                }
            });
        });

        if (count < 5 && $('#add-repasitory').next('.continer').find('.styledselect-year').val() != 'none') {
            $("#add-repasitory").after('<div class="continer">' +
                '<div>' +
                '<br />' +
                '<div class="test">' +
                '<input class="inp-form" type="text" title="نام بخش" />' +
                '<select id="' + count + '" class="styledselect-year">' +
                '<option value="none">&nbsp; ---------------- &nbsp;</option>' +
                '<option value="key">&gt;&nbsp;key&nbsp;</option>' +
                '<option value="luc">&gt;&nbsp;luke&nbsp;</option>' +
                '<option value="col">&gt;&nbsp;college&nbsp;</option>' +
                '<option value="por">&gt;&nbsp;Portable&nbsp;</option>' +
                '<option value="que">&gt;&nbsp;Question&nbsp;</option>' +
                '</select>' +
                '<input type="button" class="addLink margin" value="افزودن لینک" />' +
                '<input type="button" class="removeLink margin" value="حذف لینک" />' +
                '<input type="button" class="removeAllLink margin" value="حذف تمام لینک ها" />' +
                '</div>' +
                '<div>' +
                '<br />' +
                '<div class="add-link-inpute">' +
                'نام نسخه:&nbsp;' +
                '<input class="inp-form" type="text" name="AccessLink">' +
                '</div>' +
                '<br />' +
       ...