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
- How to get click event object data from dynamically created button using JQuery or javascript
- How to convert json object keys into different arrays removing the duplicate
- How to get length of duplicate object keys
- How do I add a duplicate div above a button rather than below
- How to remove duplicate from object list in javasccript
- How can I duplicate the add to cart button on the single product page, but redirect to another page?
- How to attach a button to a JSON object field and send the field to another webpage
- How to serialize correctly? Ajax updates all instances of a django upvote button in a object forloop when pressed
- How can I fully duplicate middle click behavior with javascript
- how can i control jquery UI Accordian with external anchor or button
- jQuery - My first plugin, how to prevent duplicate application to an element
- jQuery Menu Button Disappearing on drop down in webkit only, how do I make it stay put?
- How to preserve previous HTML when back button clicked
- How to access Span text of button in JQuery
- How to call jquery function on button click?
- How to switch on and off the readonly mode on runtime with a checkbox button for tinymce?
- How to stop propagation when click to custom button in kendo ui grid header
- How do I reset a radio button when I press back on the browser
- How to display a dynamic message on Clientclick event of Link button inside a grid view
- How to scroll back to the top of page on button click?
- How to apply class to first button of the div?
- How can I prevent the user from clicking a button too fast, in order to prevent an extra ajax request?
- How to pass `this` object to function through anchor link and convert it to jQuery object?
- newbie: How to clean up an object in javascript?
- How to press a button with Enter Key
- How to convert nested object into an array in javascript?
- How to get the name of an object that is inside another object?
- How to use the Jquery Shake effect on Button click?
- How do I force a postback on an ASP.NET button inside a jQuery modal dialog (div)?
- How do you dynamically access attributes of a JSON Object
- How do you use Javascript to duplicate form fields?
- How to get alert message on second click of a button
- How to change the class of an html button at runtime on its click event?
- how to read if radio button checked and save it as 1 with javascript?
- How to reference jQuery object inside of it's own method call?
- How do I use jQuery to disable a form's submit button until every required field has been filled?
- how to get an object from a textarea value
- Using jQuery, how would I get a div to increase height slowly rather than instantly with button onClick?
- How to show next article on click of a button
- How to select an object in JQuery?
- How to check if a radio button is checked to display a button to continue
- How to check if object value in array already exists using jquery
- how to prevent a click event on a button if it is already processing a current request
- How to disable button with materialize?
- How to Create multiple Toggle button
- How to transform an array of promise objects into a promise object of an array?
- How can I convert a date / time I get in as part of a json object into a date only?
- How to make code wait for okay/cancel button selection?
- how to remove duplicate div sections?
- jQuery: .each how to reference matched object
More Query from same tag
- submit post data using ajax to a php file
- Is there a way to animate an element in jQuery and fire a function for every pixel in height changed?
- jQuery POST of an array of objects to Node
- Why does jQuery.keydown not fire the first letter I type?
- how to focus a custom cell in table?
- How to redirect to another view from jQuery
- Rails polling with jquery
- see if parent is checkbox
- Why this BootStrap accordion example can't work on my page?
- alphanumeric range slider in jquery
- My first function is having a syntax error
- jQuery prevent an image from being clicked on until other function is completed
- Sorting a List<T> object in MVC view page
- How to change selected option element between 2 selectbox in select2 in jQuery?
- delegate events but exclude certain elements within child div
- Chrome Extension - How to message DOM from content script to background page?
- How to display the value of a cookie in a .html file
- Is there anything glaringly wrong with my .ajaxSetup jquery call?
- Slide show in jQuery doesn't respond on next button
- how to check more than one class name in js
- get window height dynamicly with jquery for image gallery
- JQuery - scalable/resizing background image
- jQuery-UI DatePicker not working with Aurelia and Typescript
- Passing PHP Array into Javascript
- ASP .NET MVC4 Datepicker with month and year only
- How can I remove the white border from Chart.js V2.6.0 pie chart?
- How to append an element (div) that contains multiples elements inside using jQuery?
- Possible to modify jQuery id selector?
- How to write literal jQuery object in coffeescript
- Usage of split() API for two special charaters.?