jQuery closest() and find()
<p>I'm trying to figure out a way to only select one calculator at a time by using jQuery transverse functions closest() and find(). At its current state when pressing a button it will use both calculators. I need it to only use one calculator at a time. Need some help. Is the html laid out correctly? I know that with many tutorials on DOM Traversing they use ul and li, should I here?  </p>

<p><strong>index.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Calculator App&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="calcWrap"&gt;
        &lt;h2&gt;Calculator One&lt;/h2&gt;
        &lt;div action="" class="calculator"&gt;
                &lt;input type="text" class="answer" value="" disabled="disabled"/&gt;&lt;br&gt;
                &lt;button type="button" class="number 1" value="1"&gt;1&lt;/button&gt;
                &lt;button type="button" class="number 2" value="2"&gt;2&lt;/button&gt;
                &lt;button type="button" class="number 3" value="3"&gt;3&lt;/button&gt;
                &lt;button type="button" class="symbol /" value="/"&gt;/&lt;/button &lt;br&gt;
                &lt;button type="button" class="number 4" value="4"&gt;4&lt;/button&gt;
                &lt;button type="button" class="number 5" value="5"&gt;5&lt;/button&gt;
                &lt;button type="button" class="number 6" value="6" &gt;6&lt;/button&gt;
                &lt;button type="button" class="symbol *" value="*"&gt;*&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="number 7" value="7"&gt;7&lt;/button&gt;
                &lt;button type="button" class="number 8" value="8"&gt;8&lt;/button&gt;
                &lt;button type="button" class="number 9" value="9"&gt;9&lt;/button&gt;
                &lt;button type="button" class="symbol -" value="-"&gt;-&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="number 0" value="0" &gt;0&lt;/button&gt;
                &lt;button type="button" class="number ." value="."&gt;.&lt;/button&gt;
                &lt;button type="button" class="C" value="C"&gt;C&lt;/button&gt;
                &lt;button type="button" class="symbol +" value="+"&gt;+&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="equals ="&gt;=&lt;/button&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;h2&gt;Calculator One&lt;/h2&gt;
        &lt;div action="" class="calculator"&gt;
                &lt;input type="text" class="answer" value="" disabled="disabled"/&gt;&lt;br&gt;
                &lt;button type="button" class="number 1" value="1"&gt;1&lt;/button&gt;
                &lt;button type="button" class="number 2" value="2"&gt;2&lt;/button&gt;
                &lt;button type="button" class="number 3" value="3"&gt;3&lt;/button&gt;
                &lt;button type="button" class="symbol /" value="/"&gt;/&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="number 4" value="4"&gt;4&lt;/button&gt;
                &lt;button type="button" class="number 5" value="5"&gt;5&lt;/button&gt;
                &lt;button type="button" class="number 6" value="6" &gt;6&lt;/button&gt;
                &lt;button type="button" class="symbol *" value="*"&gt;*&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="number 7" value="7"&gt;7&lt;/button&gt;
                &lt;button type="button" class="number 8" value="8"&gt;8&lt;/button&gt;
                &lt;button type="button" class="number 9" value="9"&gt;9&lt;/button&gt;
                &lt;button type="button" class="symbol -" value="-"&gt;-&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="number 0" value="0" &gt;0&lt;/button&gt;
                &lt;button type="button" class="number ." value="."&gt;.&lt;/button&gt;
                &lt;button type="button" class="C" value="C"&gt;C&lt;/button&gt;
                &lt;button type="button" class="symbol +" value="+"&gt;+&lt;/button&gt;&lt;br&gt;
                &lt;button type="button" class="equals ="&gt;=&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>styles.css</strong></p>

<pre><code> body {
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

html {
font-size: 1vw;
}

h2 {
font-size: 2rem;
color: white;
}

.calcWrap {
width: 43rem;
margin-right: auto;
margin-left: auto;
padding: 2rem;
margin-top: 10rem;
border: 0.3rem solid black;
border-radius: 1.5rem;
background-color: #3E7CB1;
}

li {
float: left;
}

.answer {
width: 43rem;
height: 12rem;
background-color: lightgray;
font-size: 4rem;
text-align: right;
font-weight: lighter;
padding: 2rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
}

.number {
width: 10.5rem;
height: 10.5rem;
background-color: #DBD5B5;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
}

.symbol {
width: 10.5rem;
height: 10.5rem;
background-color: #FCAB10;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.C {
width: 10.5rem;
height: 10.5rem;
background-color: #F8333C;
margin-top: 0.5rem;
color: #E4FDE1;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.equals {
width: 43rem;
height: 10rem;
background-color: #44AF69;
margin-top: 5px;
font-size: 6rem;
color: white;
border-radius: 1rem;
font-weight: bold;
}
</code></pre>

<p><strong>scripts.js</strong></p>

<pre><code>$(document).ready(function() {
var numberOne;
var numberTwo;
var operator;
var $result = $(".answer");

function reset() {
    numberOne = null;
    numberTwo = null;
    operator = null;
    $result.val("");
}

reset();

$(".number").click(function() {
    var clickDigit = $(this).text();
    var currentVal = $result.val();
    var newVal;
    if(currentVal === "") {
        newVal = clickDigit;
    } else {
        newVal = currentVal + clickDigit;
    }
    $result.val(newVal);
});

$(".symbol").click(function() {
    operator = $(this).text();
    numberOne = parseFloat($result.val());
    $result.val("");
});

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

    var total;

    numberTwo = parseFloat($result.val());

    if(operator === "+") {
        total = numberOne + numberTwo;
    } 
    else if (operator === "-") {
        total = numberOne - numberTwo;
    }
    else if (operator === "/") {
        total = numberOne / numberTwo;
    }
    else if (operator === "*") {
        total = numberOne * numberTwo;
    }

    $result.val(total);

});

$(".C").click(function() {
    reset();
});

$(this).closest(button).find(".answer");

});
</code></pre>