Is there a feature to enable a separate comment box for every tweet, similar to the toggle

Just starting out with jQuery and JS. Want to create a simplified version of Twitter with individual comment boxes for each tweet. Here's my JSFiddle: Currently, the comment box is appearing at the end of the last tweet instead of under each tweet. How can I achieve this?

Javascript:

$(document).ready(function () {
    $("#btn1").click(function () {
        $("p").append(" <b>Appended text</b>");
    });

    $(".commentbutton").click(function v() {
        var text = $("#txt1").val();

        $("body").append('<br><div class="x"><label class="gp">' + text + '</label><button id="b1"</button>Comment</div>');
        $("body").find(".x:last").hide().slideDown("slow");

    });

    $(document).on('click', '.x>button', function () {
        $('body').find('.x:last').append('<input id="txt1" type="text">');
    });
});

HTML:

<div style="position:absolute;left:230px;top:30px;border:solid;display:inline-block">
<p>Type a tweet</p>
<input id="txt1" type="text">
<br>
<button id="btn2" class="commentbutton">Tweet</button>
</div>

CSS:

.gp {
    border-style: solid;
    max-width: 30%;
    padding: 2px;
    display: block;
}
.x {
    width: 200px;
    background-color: #93bbd4;
    border-style: solid;
}
#txt1 {
    width: 200px;
    height: 28px;
}

Answer №1

Check out this link for a demo: Sample

$(document).on('click', '.x>button', function () {
    var id = "twt" + $(this).parent().index() +  "txt" + ($(this).parent().find('input').length+1);
    $(this).parent().append('<input id="' + id+ '" type="text">');
});

I have addressed the issue of adding text boxes dynamically. Additionally, I have resolved the problem with multiple ids that you were encountering.

Answer №2

To solve your issue, switch from using the append() method to the prepend() method. If I have correctly interpreted your question, this should resolve the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The select2 component fails to render properly when loaded dynamically through an ajax request

This is really confusing to me... I have a form with an input element that has a class of "select2". I initialize it by calling $(".select2").select2(), and it works perfectly fine. However, when I load this form as an HTML element retrieved through an A ...

Once the form has been loaded without any information, go ahead and submit

I have created my index.php file with the following code: <script src="js/jquery-1.9.1.js"></script> <script> $(document).ready(function(){ $("#sload").load('save1.php',function(forma){ $(".csave").click(function(){ ...

Retrieve data from jQuery and send it to PHP multiple times

<input type="checkbox" value="<?= $servicii_content[$j]['title'] ?>" name="check_list" id="check" /> By using jQuery, I am able to extract multiple values from the table above once the checkboxes are checked. Here's how: var te ...

Iterate over a JSON document, insert an item, and then store the updated data in a separate

My JSON file contains elements like this: var data=[{ "Name": "Jeff", "Age": 35 }, { "Name": "cliff", "Age": 56 }] I need to include a new field called 'Country'. So the updated structure should be: var data=[{ "Name": "Jef ...

Implementing Pagination for a JSON Object using Javascript and Jquery

I am looking for the most effective way to implement pagination in my current situation: I am using "$('body').append(htmlText);" to display the items from a JSON object. How can I set up pagination so that each page displays only one item based ...

Preserve the visibility of a text input form while the checkbox is selected

Within my HTML code, there is a form that includes a checkbox labeled "other." When this checkbox is selected, a textbox will appear. If the user types in text and submits the form, the textbox disappears, but the checkbox remains checked (as saved in loca ...

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

"Remaining Elements" within a CSS Design

I am faced with a challenge where I have 4 elements nested inside a container element. The height of the container should be set to 100% of the browser window. The inner elements need to stack vertically, with the first two and last elements having a natur ...

What are some ways I can enhance the typography within Material UI?

Currently, I am in the process of developing a custom theme utilizing createMuiTheme. However, my application requires more typography variants than what Material UI provides out of the box. I need to extend the typography so that it aligns with my specifi ...

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

Enumerate the variable values that are validated using jQuery

I've made good progress with this in jsFiddle, but I can't seem to figure out why the first value isn't displaying a bullet point.. Check out my code on jsFiddle! <div id="checkboxes"> <input id="chkbx_0" type="checkbox" name= ...

When transferring JavaScript Array via Ajax to PHP, it results in a null response

I am attempting to send a JavaScript array to PHP, but the post data keeps returning null. Here is my JavaScript code: console.log($Seats); console.log($Seats.toString()); console.log(JSON.stringify({ $Seats })); var jsonStr = JSON.stringify($Seats); $.a ...

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

Steps to retrieve the chosen dropdown menu in the edit model using Laravel

I'm working on a Laravel project where I can retrieve data from the database into my modal. However, every time I update the modal, the option values in both select fields increase with the fetched result. How do I prevent this from happening? Below a ...

Alter the background of a div in a webpage using PHP and jQuery to display a

I have a collection of 10 background images for each season (Spring, Summer, etc.) stored in folders labeled 1, 2, 3, and 4. I am looking to randomly change the div background image for each season. For example, changing the random image from folder 1 for ...

get data from a JSON array with no specific name on the provided URL

Struggling to extract specific values from a JSON file located at the following URL: The content of the URL data is as follows: [ { "key":{ "parentKey":{ "kind":"user", "id":0, "name":"test 1" }, ...

Issue with Bootstrap Carousel displaying as a static image instead of a slide

I have worked on creating a Portfolio.js file using the react library with react-bootstrap Carousel.js to build an uncontrolled carousel. However, my code is showing the slides vertically instead of behaving like a typical carousel. You can view my code at ...

What sets apart the method of assigning event handlers using bind() versus each() in jQuery?

Could someone explain the difference between using bind() to assign event handlers and using each() for the same task? $(function () { $('someElement') .bind('mouseover', function (e) { $(this).css({ ...

translating xpath code into css styling

Can you help me with converting this xpath to css? By.xpath("//div[@id='j_id0:form:j_id687:j_id693:j_id694:j_id700']/div[2]/table/tbody/tr/td"); I've tried a couple of options, but none of them seem to work: By.cssSelector("div[@id=&apos ...

Experiencing a problem with the JavaScript loading function

An error was logged in the console SyntaxError: unterminated string literal A piece of code is supposed to display a notification $(document).ready(function () { alertify.success("Success log message"); return false; }); Despite testing the cod ...