javascript - MCQ 问题格式的 jQuery 和 JavaScript 问题

Question

我有 MCQ 问题的代码。该功能是当我单击问题部分中的“插入新”时，它会显示一个问题和一个带有选项的输入字段。我们可以创建多个问题。

但我的问题是，当我单击“添加更多选项”按钮时，它将在第一个问题选项卡上添加选项，但是当我创建新问题而不关闭第一个问题，然后单击第一个问题的“添加新选项”按钮时，它会添加选项最新添加问题。

我希望如果我单击“添加更多选项”按钮，它将在同一问题上添加选项。

如何重现问题？

首先添加新问题并且不要关闭问题，然后单击“插入新”按钮，然后单击第一个问题的添加更多选项按钮，然后您就可以看到问题。如果您open it in jsfiddle，请调整窗口大小

$(document).ready(function() {
  var i = 0;
  var q = 4;

  $('#insertnewqstnbtn').click(function() {
    i++;
    $('#newqstndiv').append('<div id="appenddiv' + i + '" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="' + i + '" class="closebtn"><a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggleaddqstn_' + i + '"><div class= "toggle"><label for="toggleaddqstn_' + i + '"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt' + i + '" type="text" placeholder="Enter question text here" class="ms-title-field question" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '1"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn1' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn1' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '2"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn2' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn2' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '3"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn3' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn3' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '4"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxname' + i + '" id="checkboxn4' + i + '" class="cm-box"/><label for="checkboxn4' + i + '"></label></div></div></div><span class="add-filed"><a href="javascript:;" id="add-field_' + i + '"></a></span><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn_' + i + '" class="ms-cm-button add-detail-btn createquestion" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');

    var checkMultiChoice = $("#toggleaddqstn_" + i);
    var addMoreBtn = $("#add-field_" + i);

    addMoreBtn.click(function() {
      var parentDiv = "#appenddiv" + i;
      var lastDiv = ".ms-form-second-ground:last";

      var addFieldSplit = $(this).attr('id');
      var fieldSplit = addFieldSplit.split('_');
      var fieldSplitFirst = fieldSplit[0];
      var fieldSplitTwo = fieldSplit[1];
      q++;
      if (checkMultiChoice.prop("checked") == true) {
        $(parentDiv + " " + ".ms-form-second-ground:last").after('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + q + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + q + ' text" id="option' + q + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" name="checboxname' + i + '" id="checkboxn' + q + '' + i + '" class="cm-box"/><label for="checkboxn' + q + '' + i + '"></label></div></div></div>');
      } else if (checkMultiChoice.prop("checked") == false) {
        $('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + q + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + q + ' text" id="option' + q + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxnamee' + i + '" id="checkboxn' + q + '' + i + '" class="cm-box"/><label for="checkboxn' + q + '' + i + '"></label></div></div></div>').insertAfter(parentDiv + " " + ".ms-form-second-ground:last");
      }
    });
    var splitCheck = (checkMultiChoice.attr('id')).split("_");
    var splicheckfirst = splitCheck[0];
    var splichecksecond = splitCheck[1];

    checkMultiChoice.click(function() {
      if ((checkMultiChoice).prop("checked") == true) {

        for (var input = 1; input <= q; input++) {
          var btnOption = "checkboxn" + input + splichecksecond;

          $("#" + btnOption).attr('type', 'checkbox');
        }
      } else if ((checkMultiChoice).prop("checked") == false) {
        for (var input = 1; input <= q; input++) {
          var btnOption = "checkboxn" + input + splichecksecond;
          $("#" + btnOption).attr('type', 'radio');
        }

      }
    });

    $(document).on('click', '.closebtn', function() {
      var button_id = $(this).attr("id");
      $('#appenddiv' + button_id + '').remove();
    });

    //var questionAdd = 0;
    $('.createquestion').click(function() {
      //questionAdd++;
      var id = this.id;
      var split_id = id.split('_');
      var text = split_id[0];
      var bid = split_id[1];
      var questionId = $("#questiontxt" + bid).val();
      var ansFirst = $("#option1" + bid).val();
      var ansSecond = $("#option2" + bid).val();
      var ansThird = $("#option3" + bid).val();
      var ansFourth = $("#option4" + bid).val();
      $('#main-after-append').append('<div class="after-append" id="afterappendid' + i + '"><div class="d-flex-questions"><div class="m-question-2"><h3 class="ms-font-xl" id="qstnumber' + i + '">Question ' + i + '</h3><span>(Locate after page 1)</span></div><div class="multichoice-question-btn"><form  style="width:100%;" class="ms-second-form"><div class="item"><span>Multiple Choice?</span><input type="checkbox" id="toggle_today_summary2" name="" value=""><div class="toggle"><label for="toggle_today_summary2"><i></i></label></div></div></form></div></div><h4 class="ms-font-xl"><input type="text" id="question' + i + '" value="' + questionId + '" class="question-a"></h4><form  class="form-for-ans"><div class="ms-form-first-group"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFirst + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio" name="ans" value="everyone" /><label for="radio"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansSecond + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio2" name="ans" value="Not me" /><label for="radio2"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansThird + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio3" name="ans" value="My Manager" /><label for="radio3"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFourth + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio4" name="ans" value="My Manager" /><label for="radio4"></label></div></div></div></form></div><div class="border-bottom-line mb-bottom-15"></div></div>');
      $("#appenddiv" + i).hide();
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newqstndiv"></div>
<button id="insertnewqstnbtn" class="ms-cm-button"> Insert New</button>

Answer 1

我看了你的代码。问题是您在点击事件(addMoreBtn.click)中使用了 var i ，因此它始终引用创建的最新问题。您需要一种方法来跟踪事件处理程序适用于什么问题。

实现此目的的一种方法是将数据属性添加到 anchor 标记 (#appenddiv+i)。我在下面的代码片段中添加了一个数据属性(data-num)，我还更新了点击事件以使用数据属性而不是 i。

我还添加了评论以突出显示更改。请参阅下面的片段。

$(document).ready(function() {
  var i = 0;
  var q = 4;

  $('#insertnewqstnbtn').click(function() {
    i++;

    // <a href="javascript:;" id="add-field_'+i+'" data-num="'+i+'"></a> added data-num attribute
    $('#newqstndiv').append('<div id="appenddiv' + i + '" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="' + i + '" class="closebtn"><a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggleaddqstn_' + i + '"><div class= "toggle"><label for="toggleaddqstn_' + i + '"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt' + i + '" type="text" placeholder="Enter question text here" class="ms-title-field question" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '1"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn1' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn1' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '2"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn2' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn2' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '3"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn3' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn3' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '4"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxname' + i + '" id="checkboxn4' + i + '" class="cm-box"/><label for="checkboxn4' + i + '"></label></div></div></div><span class="add-filed"><a href="javascript:;" id="add-field_' + i + '" data-num="' + i + '"></a></span><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn_' + i + '" class="ms-cm-button add-detail-btn createquestion" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');

    var checkMultiChoice = $("#toggleaddqstn_" + i);
    var addMoreBtn = $("#add-field_" + i);

    addMoreBtn.click(function() {




      // changed  var parentDiv = "#appenddiv" + i;
      //to:
      var parentDiv = "#appenddiv" + $(this).data("num");
      var lastDiv = ".ms-form-second-ground:last";
      // added r to count how many fields are in this question
      var r = $(parentDiv + ' > [id^=option]').length+1 ;
      var addFieldSplit = $(this).attr('id');
      var fieldSplit = addFieldSplit.split('_');
      var fieldSplitFirst = fieldSplit[0];
      var fieldSplitTwo = fieldSplit[1];
      q++;
      if (checkMultiChoice.prop("checked") == true) {
        $(parentDiv + ".ms-form-second-ground:last").after('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + r + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + r + ' text" id="option' + r + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" name="checboxname' + i + '" id="checkboxn' + r + '' + i + '" class="cm-box"/><label for="checkboxn' + r + '' + i + '"></label></div></div></div>');
      } else if (checkMultiChoice.prop("checked") == false) {
        $('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + r + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + r + ' text" id="option' + r + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxnamee' + i + '" id="checkboxn' + r + '' + i + '" class="cm-box"/><label for="checkboxn' + r + '' + i + '"></label></div></div></div>').insertAfter(parentDiv + " " + ".ms-form-second-ground:last");
      }
    });
    var splitCheck = (checkMultiChoice.attr('id')).split("_");
    var splicheckfirst = splitCheck[0];
    var splichecksecond = splitCheck[1];

    checkMultiChoice.click(function() {
      if ((checkMultiChoice).prop("checked") == true) {

        for (var input = 1; input <= q; input++) {
          var btnOption = "checkboxn" + input + splichecksecond;

          $("#" + btnOption).attr('type', 'checkbox');
        }
      } else if ((checkMultiChoice).prop("checked") == false) {
        for (var input = 1; input <= q; input++) {
          var btnOption = "checkboxn" + input + splichecksecond;
          $("#" + btnOption).attr('type', 'radio');
        }

      }
    });

    $(document).on('click', '.closebtn', function() {
      var button_id = $(this).attr("id");
      $('#appenddiv' + button_id + '').remove();
    });

    //var questionAdd = 0;
    $('.createquestion').click(function() {
      //questionAdd++;
      var id = this.id;
      var split_id = id.split('_');
      var text = split_id[0];
      var bid = split_id[1];
      var questionId = $("#questiontxt" + bid).val();
      var ansFirst = $("#option1" + bid).val();
      var ansSecond = $("#option2" + bid).val();
      var ansThird = $("#option3" + bid).val();
      var ansFourth = $("#option4" + bid).val();
      $('#main-after-append').append('<div class="after-append" id="afterappendid' + i + '"><div class="d-flex-questions"><div class="m-question-2"><h3 class="ms-font-xl" id="qstnumber' + i + '">Question ' + i + '</h3><span>(Locate after page 1)</span></div><div class="multichoice-question-btn"><form  style="width:100%;" class="ms-second-form"><div class="item"><span>Multiple Choice?</span><input type="checkbox" id="toggle_today_summary2" name="" value=""><div class="toggle"><label for="toggle_today_summary2"><i></i></label></div></div></form></div></div><h4 class="ms-font-xl"><input type="text" id="question' + i + '" value="' + questionId + '" class="question-a"></h4><form  class="form-for-ans"><div class="ms-form-first-group"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFirst + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio" name="ans" value="everyone" /><label for="radio"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansSecond + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio2" name="ans" value="Not me" /><label for="radio2"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansThird + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio3" name="ans" value="My Manager" /><label for="radio3"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFourth + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio4" name="ans" value="My Manager" /><label for="radio4"></label></div></div></div></form></div><div class="border-bottom-line mb-bottom-15"></div></div>');
      $("#appenddiv" + i).hide();
    });

  });
});

/* Page-specific styling */

@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 0px;
  /* bottom = footer height */
  /** margin:0 0 40px;*/
  font-family: 'Comfortaa', cursive;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 100%;
}


/*.padding {*/


/*    padding: 15px;*/


/*}*/

#notification-popup.ms-MessageBanner {
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: left;
  height: inherit;
  min-width: inherit;
}

#notification-popup .ms-MessageBanner-text {
  margin: 0;
  padding: 18px 15px;
  min-width: inherit;
}

ul {
  margin: 0;
  padding: 0;
}

.ms-no-padding {
  padding: 0px;
  margin: 0px;
}

.ms-welcome__header {
  padding: 20px;
  padding-bottom: 5px;
  padding-top: 0px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: left;
  -webkit-justify-content: left;
}

.ms-welcome__main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: left;
  -webkit-align-items: left;
}

.ms-welcome__main>h2 {
  width: 100%;
  text-align: center;
}

.ms-welcome__features {
  list-style-type: none;
  margin-top: 20px;
}

.ms-welcome__features.ms-List .ms-ListItem {
  padding-bottom: 20px;
  display: -webkit-flex;
  display: flex;
}

.ms-welcome__features.ms-List .ms-ListItem>.ms-Icon {
  margin-right: 10px;
}

.ms-welcome__action.ms-Button--hero {
  margin-top: 30px;
}

.ms-Button.ms-Button--hero .ms-Button-label {
  color: #0078d7;
}

.ms-create-new-form .ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label {
  color: #005a9e;
  cursor: pointer;
}

b {
  font-weight: bold;
}


/** custom css **/

.ms-welcome__header h2,
.ms-section-first h2,
.ms-section-second h2,
.ms-section-sixth h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 20px 0px 5px 0px;
  padding: 0px;
  letter-spacing: 0.4px;
  font-family: 'Comfortaa', cursive;
}

.ms-create-new-form h2,
.ms-section-fourth h2,
.ms-section-fifth h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  padding-bottom: 10px;
  letter-spacing: 0.4px;
  font-family: 'Comfortaa', cursive;
}

.ms-create-new-form h2 {
  position: relative;
}

.ms-section-fifth.mt-20 {
  margin-top: 20px;
}

.ms-section-fifth .m-question-2 h3 {
  font-size: 14px;
  font-family: inherit;
  margin: 0px;
  padding-top: 10px;
  font-weight: 700;
}

.ms-section-fifth h4 {
  font-size: 14px;
  font-family: inherit;
  margin: 0px;
  padding-top: 10px;
  font-weight: 700;
  line-height: 25px;
}

.ms-section-fifth .m-question-2 span {
  font-size: 10px;
  font-family: inherit;
}

.ms-section-first,
.ms-section-second,
.ms-section-third,
.ms-section-fourth,
.ms-section-fifth,
.ms-section-sixth,
.ms-section-seventh {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  padding: 0px 20px;
}


/**.ms-section-first, .ms-section-third, .ms-section-fifth, .ms-section-seventh {
    background-color: #fff9fa;
}
    */

.ms-select-filed {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  font-size: 15px;
  padding: 8px 0px;
  width: 80%;
  background-color: #fff9fa;
}

.d-flex-btn {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  font-size: 13px;
}

.ms-section-first>p {
  color: #000;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-family: inherit;
  float: left;
}

.ms-cm-button {
  width: 50%;
  border: 0px;
  padding: 5px 20px;
  font-size: 15px;
  font-weight: 300;
  background-color: #039be5;
  color: #fff;
  border-radius: 50px;
  line-height: 25px;
  margin: 20px 0px;
  font-family: 'Comfortaa', cursive;
}

.ms-cm-button-update {
  border: 0px;
  padding: 5px 20px;
  font-size: 15px;
  font-weight: 300;
  background-color: #039be5;
  color: #fff;
  border-radius: 50px;
  line-height: 25px;
  margin: 20px 0px;
  font-family: 'Comfortaa', cursive;
}

.newcoursecancelbtn {
  border: 0px;
  padding: 5px 15px;
  font-size: 15px;
  font-weight: 300;
  background-color: #333;
  color: #fff;
  border-radius: 50px;
  line-height: 25px;
  margin: 10px 0px 20px 0px;
  font-family: 'Comfortaa', cursive;
}

.ms-table-first {
  padding: 10px;
  margin: 8px 0px 0px 0px;
  text-align: left;
  border: 1px solid #dadbdc;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}

.ms-table-first th {
  padding: 5px 0px;
}

.ms-table-first tr td {
  padding-left: 0px;
}

.ms-table-first tr td button {
  margin-top: 15px;
  margin-left: 0px;
}

.form-for-ans {
  padding: 0px;
  margin: 0px;
  padding-left: 15px;
  padding-right: 15px;
}


/** toogle css **/

.d-flex-questions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.item span {
  margin: 0 0 0 0px;
  color: #000000;
  font-size: 11px;
  padding-right: 55px;
  font-weight: 600;
}

.item input[type="checkbox"] {
  font-size: 0px !important;
  width: 0px;
  height: 0px;
}


/**input[type="checkbox"] {
    display: none;
}
    */

.toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0px;
  margin: auto;
  width: 51px;
  height: 25px;
}

.toggle label,
.toggle i {
  box-sizing: border-box;
  display: block;
  background: #fff9fa;
}

.toggle label {
  width: 51px;
  height: 25px;
  border-radius: 32px;
  border: 1px solid #e5e5e5;
  transition: all 0.30s ease;
  -webkit-transform: all 0.30s ease;
  -ms-transform: all 0.30s ease;
}

.toggle i {
  position: absolute;
  top: 2px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 28px;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 3px 0 rgba(0, 0, 0, 0.15);
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.275, -0.450, 0.725, 1.450);
  -webkit-transition: all 0.3 cubic-bezier(0.0275, 0.725, 0.450)
}

input[type="checkbox"]:active+.toggle i {
  width: 35px;
}

input[type="checkbox"]:active+.toggle label,
input[type="checkbox"]:checked+.toggle label {
  background-color: #039be5;
}

input[type="checkbox"]:checked+.toggle i {
  left: 26px;
}

input[type="checkbox"]:checked:active+.toggle label {
  border: 16px solid #e5e5e5;
}

input[type="checkbox"]:checked:active+.toggle i {
  left: 14px;
}

.ms-form-first-group {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.ms-form-first-group p {
  font-size: 13px;
  font-weight: 600;
  color: #000;
}

.ms-form-second-ground {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  width: 100%
}

.ms-form-second-ground>.ms-ans-text-2 {
  background-color: #fff;
  width: 70%;
  padding: 0px 5px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.ms-form-second-ground>.ms-ans-text-2 input[type="text"] {
  margin: 0px;
  padding: 0px 10px;
  line-height: 25px;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid #dadbdc;
  border-radius: 5px;
  font-weight: 400;
}


/** round icons **/

.round {
  position: relative;
}

.round input[type="radio"]+label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: -20px;
  position: absolute;
  top: 0;
  width: 28px;
}

.round input[type="checkbox"]+label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10% !important;
  cursor: pointer;
  height: 28px;
  left: -20px;
  position: absolute;
  top: 0;
  width: 28px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
  background-color: #039be5;
  border-color: #66bb6a;
}

.round input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

.round input[type="radio"] {
  visibility: hidden;
}

.round input[type="radio"]:checked+label {
  background-color: #039be5;
  border-color: #66bb6a;
}

.round input[type="radio"]:checked+label:after {
  opacity: 1;
}

.ms-pagin-div {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  margin-top: 20px;
}

.ms-pagin-div p {
  color: #000;
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.ms-pagin-div span:first-child,
.ms-pagin-div span:last-child {
  border: 1px solid #039be5;
  padding: 2px 10px;
  border-radius: 25px;
  font-size: 13px;
  color: #039be5;
}

.ms-pagin-div span.active {
  background-color: #039be5;
  color: #fff;
}

.ms-only-line {
  font-size: 25px;
}

.ms-section-seventh {
  padding: 0px 15px;
}


/** select css **/

.ms-dropdown {
  border: 0px;
  border: 1px solid #dadbdc;
  padding: 10px 10px;
  color: #333;
  font-family: inherit;
  font-weight: 500;
  border-radius: 5px;
  font-size: 13px;
}

.ms-dropdown:first-child {
  margin-bottom: 10px;
}


/** custom css for signin*/

#login-msg .s-font-x {
  margin-left: 10px;
  margin-right: 10px;
  font-family: 'Comfortaa', cursive;
  display: block;
  color: #000;
  font-size: 17px;
  font-weight: 500;
  line-height: 23px;
}

#login-msg #sign-in {
  padding-left: 10px;
}

.tg-s-txt {
  display: flex;
  justify-content: flex-end;
  padding: 0px 10px;
}

.tg-s-txt p {
  font-size: 14px;
}

.tg-s-txt,
.tg-s-txt p {
  padding: 0px;
  margin: 5px 10px 0px 10px;
}

.sign-out-btn {
  background-color: #005a9e;
  color: #fff;
  padding: 4px 4px;
  text-decoration: underline;
}


/** modal csss */

.m-all {
  color: #000;
  margin-left: 25px;
  margin-right: 25px;
  font-family: 'Comfortaa', cursive;
  padding-top: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.f-group-f input,
.f-group-s input {
  display: block;
  width: 96%;
  font-family: 'Comfortaa', cursive;
}

.f-group-f,
.f-group-s {
  margin: 10px 0px;
  width: 100%;
}

.f-group-f .label,
.f-group-s .label {
  font-family: 'Comfortaa', cursive;
  font-size: 17px;
  font-weight: 500;
}

.f-group-f input,
.f-group-s input {
  height: 30px;
  border: 1px solid #dadbdc;
  border-radius: 4px;
  padding: 0px 10px;
  font-family: 'Comfortaa', cursive;
  font-size: 14px;
  margin-top: 5px;
}

#loginButton {
  background-color: #005a9e;
  color: #fff;
  padding: 8px 15px;
  display: inline-block;
  font-family: 'Comfortaa', cursive;
  border: 0px solid #005a9e;
  box-shadow: 0px 0px 0px 0px #005a9e;
  font-size: 16px;
  margin-top: 10px;
}

.s-acc {
  background-color: #005a9e;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 2px 10px;
  margin: 10px 0px;
  margin-bottom: 15px;
}

.s-acc h2 {
  margin: 0px;
  padding: 2px 0px 2px 0px;
  font-size: 18px;
}

.login-google,
#googleButton {
  background-color: #fff;
  border: 0px solid #fff;
  line-height: 0px;
}

.btn-s-g {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

.btn-s-g p {
  margin: 0px;
  margin-top: 10px;
  padding: 0px;
}

#googleButton span {
  color: #000;
}

.d-flex {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.d-flex img {
  width: 22px;
  margin-top: 0px;
  margin-left: 5px;
}

#googleButton,
.login-google,
.btn-s-g {
  margin: 0px !important;
  padding: 0px !important;
}


/** add course details css */

.ms-input-field-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-bottom: 8px;
}

.add-detail-btn {
  margin-top: 10px;
}

.ms-input-field-div label {
  width: 40%;
  font-size: 13px;
}

.ms-input-field-div input,
.ms-input-field-div textarea,
.ms-input-field-div select {
  width: 60%;
}

.ms-input-field-div input,
.ms-input-field-div textarea {
  border: 1px solid #dadbdc;
  border-radius: 5px;
}

.w-checkbox input[type="checkbox"] {
  width: 15px !important;
}

.w-checkbox {
  justify-content: flex-start !important;
}

.w-checkbox label {
  width: 15px !important;
}

.ms-input-field-div input {
  height: 25px;
  font-family: inherit;
  font-size: 11px;
  padding-left: 5px;
}

.ms-create-new-form {
  background-color: #fff;
  box-shadow: 0px 0px 5px 0.5px #33333314;
  padding: 8px 20px 0px 20px;
  margin: 0px;
}

.mycheckbox {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  opacity: 1;
  visibility: visible;
  color: #ee4a42;
}

.border-bottom-line {
  height: 1px;
  background-color: #dadbdc;
  width: 100%;
}

.border-bottom-line-ans {
  height: 1px;
  background-color: #dadbdc;
  width: 100%;
  margin-bottom: 10px;
}

.question-with-ans input {
  margin: 0px;
  padding: 0px 10px;
  line-height: 25px;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid #dadbdc;
  border-radius: 5px;
  font-weight: 400;
}

.question-with-ans input::placeholder {
  color: #828482;
}

.mb-bottom-15 {
  margin-bottom: 15px;
}


/** close button css **/

.closebtn {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
  opacity: 0.3;
}

.closebtn:hover {
  opacity: 1;
}

.closebtn:before,
.closebtn:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: #333;
}

.closebtn:before {
  transform: rotate(45deg);
}

.closebtn:after {
  transform: rotate(-45deg);
}


/** add button **/

.add-filed {
  position: relative;
  display: flex;
  width: 100%;
}

.add-filed a {
  position: absolute;
  right: 8px;
  top: 4px;
  width: 20px;
  height: 20px;
  opacity: 1;
  background-color: #039be5;
  border-radius: 50%;
}

.add-filed a:before,
.add-filed a:after {
  position: absolute;
  left: 9px;
  top: 5px;
  content: ' ';
  height: 10px;
  width: 2px;
  background-color: #fff;
}

.add-filed a:before {
  transform: rotate(90deg);
}

.question-a {
  border: 0px solid #fff0;
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-main" class="ms-welcome__main" style="width: 25%;">
  <!--  style="display: none;" -->
  <div class="padding">

    <!--add new question-->
    <div class="ms-section-fifth" id="main-after-append"></div>
    <div id="newqstndiv"></div>

    <button id="insertnewqstnbtn" class="ms-cm-button"> Insert New</button>

    <div class="ms-section-sixth">
      <h2 class="ms-font-xl">Update Courses</h2>
    </div>
    <div class="ms-section-seventh">
      <button class="ms-cm-button-update"> Update Course</button>
    </div>
  </div>
</div>