score:1

Accepted answer

Generally you should add scope to your selector:

var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));

Also Option numbering should be per card I think.

$(".TextInputSimpleInputPlaceholder").on("click", function () {
    var $card = $(this).closest('.card');
    var numItems = $(".radioListItemPrimaryContent", $card).length;
    var $clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
    $clone.className = "radioListItemPrimaryContent";
    $clone.find(".optionText").val("Option " + numItems);
    numItems++;
    $clone.appendTo($(".radioListItemView", $card));
});
.card {
  border-radius: .5rem !important;
  width: 45rem;
}

.card-body {
  padding: 1rem 1.5rem !important;
}

.form_frame td {
  padding-top: 12px;
}

.FormHeaderBorder {
  background-color: #673ab7;
  color: rgba(255, 255, 255, 1);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 10px;
  left: -1px;
  position: absolute;
  top: -1px;
  width: calc(100% + 2px);
  z-index: 1;
}

.card-selector {
  display: flex;
  height: calc(100% + 2px);
  left: -1px;
  position: absolute;
  bottom: -1px;
  width: 8px;
}

.card-selector-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-selector-color {
  background-color: transparent;
  flex-grow: 1;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  position: relative;
}

.viewItemActive .card-selector-color {
  background-color: #4285f4;
}

.viewItemActive .questionMainTextAreaContent {
  display: block;
}

.viewItemInactive .questionMainTextAreaContent {
  display: none;
}

.questionMainTextAreaContent {
  padding-top: 16px;
  background-color: #f8f9fa;
  border-radius: 4px 4px 0 0;
  width: 60%;
}

.questionMainTextAreaContentArea {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.viewItemActive .questionHeader {
  display: none;
}

.viewItemInactive .questionHeader {
  display: block;
}

.questionMainTextArea {
  height: 24px;
  font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .1px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: transparent;
  border: none;
  box-sizing: content-box;
  caret-color: #1a73e8;
  display: block;
  min-height: 24px;
  margin: 0;
  outline: none;
  overflow-y: visible;
  overflow-x: hidden;
  padding: 0 16px 16px;
  resize: none;
  white-space: pre-wrap;
  z-index: 1;
}

.questionMainTextAreaUnderline {
  background-color: #80868b;
  bottom: 0;
  height: 1px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.questionMainTextArea:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width .3s ease 0s, left .3s ease 0s;
  width: 0;
}

.questionMainTextArea:hover:after {
  width: 100%;
  left: 0;
}

.questionBodyRadioBody {
  margin-right: 0;
  margin-bottom: 24px;
}

.radioListItemView {
  min-height: 48px;
  background: #fff;
}

.radioListItemPrimaryContent {
  -moz-box-align: start;
  display: flex;
  align-items: center;
}

.radioListItemGutter {
  -moz-box-align: center;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 48px;
}

.radioListTypeIndicator {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 20px;
  color: #202124;
  margin-right: 10px;
}

input.radioItemToggle {
  -moz-user-select: none;
  transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px;
  box-sizing: content-box;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  outline: none;
  position: relative;
  vertical-align: middle;
  width: 20px;
  z-index: 0;
}

.radioListItemEditRegion {
  padding-right: 2.5rem;
  min-height: 48px;
  display: flex;
  flex: 1;
  -moz-box-flex: 1;
  flex-wrap: wrap;
}

.radioListValue {
  flex-grow: 1;
  -moz-box-align: center;
  align-items: center;
  display: flex;
}

.radioListMorseValue {
  flex-grow: 1;
}

.radioListItemValueInput {
  margin-top: 8px;
  width: 100%;
  -moz-user-select: none;
  display: inline-block;
  outline: none;
}

.TextInputSimpleInputContentArea {
  display: flex;
}

.radioListItemValueInput .exportInput {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 20px;
  color: #202124;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.TextInputSimpleInput {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: transparent;
  border: none;
  display: block;
  font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: .125em 0;
  z-index: 0;
}

.viewItemActive .radioListItemPrimaryContent:hover .exportUnderline,
.TextInputSimpleInputUnderline {
  visibility: visible;
}

.viewItemActive .radioListItemPrimaryContent:focus-within .exportUnderline,
.TextInputSimpleInputUnderline {
  visibility: visible;
}

.radioListItemValueInput .exportUnderline {
  margin-top: 4px;
}

.TextInputSimpleInputUnderline {
  background-color: rgba(0, 0, 0, 0.12);
  height: 2px;
  margin: 0;
  padding: 0;
  width: 100%;
  visibility: hidden;
}

.radioListItemGhostItemInput {
  flex-basis: auto;
  margin-top: 7px;
  width: auto;
  display: inline-block;
  outline: none;
}

.TextInputSimpleInputMainContent {
  position: relative;
  vertical-align: top;
}

.TextInputSimpleInputPlaceholder {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 20px;
  color: #70757a;
}

.viewItemActive .itemHideInactive {
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card MCQuestion viewItemActive">
  <div class="row g-0">
    <div class="col">
      <div class="card-body">
        <div class="questionMainTextAreaContent">
          <div class="questionMainTextAreaContentArea">
            <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
            <div class="questionMainTextAreaUnderline"></div>
            <div class="questionMainTextAreaFocusUnderline"></div>
          </div>
        </div>
        <div class="card-title questionHeader"></div>
        <div class="questionBodyRadioBody">
          <div class="radioListItemView">
            <div class="radioListItemPrimaryContent">
              <div class="radioListItemGutter">
                <div class="radioListTypeIndicator">
                  <input type="radio" name="radio-0" class="radioItemToggle">
                </div>
              </div>
              <div class="radioListItemEditRegion">
                <div class="radioListValue">
                  <div class="radioListMorseValue">
                    <span>
                      <div class="radioListItemValueInput">
                        <div class="TextInputSimpleInputContentArea">
                          <input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
                        </div>
                        <div class="TextInputSimpleInputUnderline exportUnderline"></div>
                      </div>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="itemHideInactive radioListItemPrimaryContent">
            <div class="radioListItemGutter">
              <div class="radioListTypeIndicator">
                <input type="radio" class="radioItemToggle" aria-checked="false" disabled>
              </div>
            </div>
            <div class="radioListItemGhostItemInput">
              <div class="TextInputSimpleInputMainContent">
                <div class="TextInputSimpleInputPlaceholder" role="button">
                  <div class="TextInputSimpleInputContentArea">
                    <div class="TextInputSimpleInput exportInput optionText">
                      Add option
                    </div>
                  </div>
                  <div class="TextInputSimpleInputUnderline exportUnderline"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="card MCQuestion viewItemActive">
  <div class="row g-0">
    <div class="col">
      <div class="card-body">
        <div class="questionMainTextAreaContent">
          <div class="questionMainTextAreaContentArea">
            <textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
            <div class="questionMainTextAreaUnderline"></div>
            <div class="questionMainTextAreaFocusUnderline"></div>
          </div>
        </div>
        <div class="card-title questionHeader"></div>
        <div class="questionBodyRadioBody">
          <div class="radioListItemView">
            <div class="radioListItemPrimaryContent">
              <div class="radioListItemGutter">
                <div class="radioListTypeIndicator">
                  <input type="radio" name="radio-0" class="radioItemToggle">
                </div>
              </div>
              <div class="radioListItemEditRegion">
                <div class="radioListValue">
                  <div class="radioListMorseValue">
                    <span>
                      <div class="radioListItemValueInput">
                        <div class="TextInputSimpleInputContentArea">
                          <input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
                        </div>
                        <div class="TextInputSimpleInputUnderline exportUnderline"></div>
                      </div>
                    </span>
                  </div>
                </div>
              </div>
              <div class="radioListMorselRoot itemHideInactive">
                <div class="radioListMorselDeleteButton" aria-label="Remove Option">
                  <span class="ButtonContent">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="#5f6368" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                        <path d="M0 0h24v24H0z" fill="none"></path>
                      </svg>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="itemHideInactive radioListItemPrimaryContent">
            <div class="radioListItemGutter">
              <div class="radioListTypeIndicator">
                <input type="radio" class="radioItemToggle" aria-checked="false" disabled>
              </div>
            </div>
            <div class="radioListItemGhostItemInput">
              <div class="TextInputSimpleInputMainContent">
                <div class="TextInputSimpleInputPlaceholder" role="button">
                  <div class="TextInputSimpleInputContentArea">
                    <div class="TextInputSimpleInput exportInput optionText">
                      Add option
                    </div>
                  </div>
                  <div class="TextInputSimpleInputUnderline exportUnderline"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


Related Query

More Query from same tag